Gestion de l'accès aux fichiers locaux pour les actions du serveur Next.js 14.1 sur Vercel

Résolution des problèmes d'accès aux fichiers dans les actions du serveur Next.js 14.1 à l'aide de diverses méthodes

Pour accéder en toute sécurité aux fichiers locaux en production, cette solution utilise un backend Node.js avec une route API.

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');
  }
}

Ensuite, utilisez la configuration modulaire du Webpack pour copier les fichiers. Builds de production pour JavaScript

Afin de garantir que les fichiers locaux sont correctement regroupés en production, cette approche modifie les paramètres du Webpack.

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;
  },
};

Accès dynamique aux fichiers à l'aide de routes API au lieu d'actions de serveur

Avec cette méthode, nous utilisons des routes API au lieu d'un accès dynamique aux fichiers pour fournir un service de fichiers local prêt pour la production.

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');
  }
}

Test unitaire pour l'accès aux fichiers dans la route API

Ce test unitaire confirme qu'un fichier PDF est correctement servi par la route API.

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');
  });
});

Questions courantes sur la gestion des fichiers locaux dans les actions du serveur Next.js

1. Comment puis-je m’assurer que les fichiers locaux sont disponibles en production ?
2. En incluant CopyPlugin dans la configuration de votre Webpack, vous pouvez vous assurer que les ressources locales, telles que les fichiers PDF et les polices, sont regroupées dans la version et rendues accessibles.
3. Pourquoi est-ce que j'obtiens des erreurs ENOENT en production ?
4. La raison de cette erreur est que dans des systèmes tels que Vercel, les fichiers ou répertoires auxquels vous tentez d'accéder n'étaient pas inclus dans la version de production.
5. Je souhaite accéder aux fichiers, mais puis-je utiliser les routes API au lieu des actions du serveur ?
6. Oui, vous pouvez bénéficier d'un contrôle supplémentaire et garantir que les fichiers sont fournis correctement dans un environnement de production en transférant la fonctionnalité d'accès aux fichiers vers une route API.
7. Quel est le rôle de process.cwd() dans les chemins de fichiers ?
8. process.cwd() fournit le répertoire de travail actuel, aidant à la création dynamique de chemins de fichiers indépendants des variations de l'environnement.
9. Dois-je utiliser @vercel/blob pour le stockage de fichiers ?
10. Bien que @vercel/blob soit une option, cela peut entraîner un retard dans des processus tels que la production de PDF. Les options plus rapides peuvent être des routes API ou un accès direct aux fichiers.

Réflexions finales sur la gestion de l'accès aux fichiers locaux

L'accès aux fichiers locaux peut être une grosse difficulté lors de l'utilisation des actions serveur dans Next.js 14.1, en particulier sur Vercel. Cependant, les développeurs peuvent s'assurer que leurs fichiers sont compressés et disponibles en production en utilisant des technologies telles que CopyPlugin et les routes API de Webpack.

Vous pouvez éviter tout problème en vous concentrant sur les techniques de gestion dynamique des fichiers, comme le déplacement des fonctionnalités de fichiers vers les routes API. Des recherches plus approfondies sur les techniques d'accès aux fichiers pourraient aboutir à des solutions encore plus efficaces pour des déploiements ultérieurs.