Hantera lokal filåtkomst för Next.js 14.1 Serveråtgärder på Vercel

Åtgärda problem med filåtkomst i Next.js 14.1 Serveråtgärder med olika metoder

För att säkert komma åt lokala filer i produktionen använder den här lösningen en Node.js-backend med en API-rutt.

const { PDFDocument } = require('pdf-lib');
const fs = require('fs');
const path = require('path');
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const templatePath = path.join(pdfDataDir, 'template.pdf');
    const pdfDoc = await PDFDocument.load(fs.readFileSync(templatePath));
    const pdfBytes = await pdfDoc.save();
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(pdfBytes);
  } catch (error) {
    res.status(500).send('Error generating PDF');
  }
}

Använd sedan Modular Webpack Configuration för att kopiera filer. Produktionsbyggen för JavaScript

För att garantera att lokala filer är korrekt buntade i produktionen, ändrar detta tillvägagångssätt Webpack-inställningarna.

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && isServer) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [{
            from: path.join(__dirname, 'actions', 'pdf_data'),
            to: path.join(__dirname, '.next', 'server', 'actions', 'pdf_data'),
          }],
        })
      );
    }
    return config;
  },
};

Få åtkomst till filer dynamiskt med API-rutter istället för serveråtgärder

Med den här metoden använder vi API-rutter istället för dynamisk filåtkomst för att tillhandahålla produktionsklar lokal filservering.

import { promises as fs } from 'fs';
import path from 'path';
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const filePath = path.join(pdfDataDir, 'template.pdf');
    const file = await fs.readFile(filePath);
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(file);
  } catch (err) {
    res.status(500).send('Error loading file');
  }
}

Enhetstest för filåtkomst i API Route

Detta enhetsteste bekräftar att en PDF-fil betjänas av API-rutten.

import handler from '../pages/api/generate-pdf';
import { createMocks } from 'node-mocks-http';
describe('PDF Generation API', () => {
  it('should return a PDF', async () => {
    const { req, res } = createMocks({ method: 'GET' });
    await handler(req, res);
    expect(res._getStatusCode()).toBe(200);
    expect(res._getHeaders()['content-type']).toBe('application/pdf');
  });
});

Vanliga frågor om hantering av lokala filer i Next.js Server Actions

1. Hur kan jag säkerställa att lokala filer är tillgängliga i produktionen?
2. Genom att inkludera CopyPlugin i din Webpack-konfiguration kan du se till att lokala tillgångar, såsom PDF-filer och teckensnitt, paketeras i byggnaden och görs tillgängliga.
3. Varför får jag ENOENT-fel i produktionen?
4. Anledningen till det här felet är att i system som Vercel inkluderades inte filerna eller katalogerna du försöker komma åt i produktionsbygget.
5. Jag vill komma åt filer, men kan jag använda API-rutter istället för serveråtgärder?
6. Ja, du kan ha ytterligare kontroll och garantera att filer tillhandahålls korrekt i en produktionsmiljö genom att överföra filåtkomstfunktionaliteten till en API-rutt.
7. Vilken roll har process.cwd() i filsökvägar?
8. process.cwd() tillhandahåller den aktuella arbetskatalogen, som hjälper till att dynamiskt skapa filsökvägar oberoende av miljövariationer.
9. Ska jag använda @vercel/blob för fillagring?
10. Även om @vercel/blob är ett alternativ kan det göra att processer som PDF-produktion släpar efter. Snabbare alternativ kan vara API-rutter eller direkt filåtkomst.

Sista tankar om hantering av lokal filåtkomst

Att komma åt lokala filer kan vara ett stort problem när du använder serveråtgärder i Next.js 14.1, särskilt på Vercel. Utvecklare kan dock se till att deras filer är packade och tillgängliga i produktion genom att använda tekniker som Webpacks CopyPlugin och API-rutter.

Du kan undvika eventuella problem genom att koncentrera dig på dynamiska filhanteringstekniker, som att byta filfunktionalitet till API-rutter. Ytterligare forskning om filåtkomsttekniker kan resultera i ännu mer effektiva lösningar för senare distributioner.