Gerenciando o acesso a arquivos locais para ações do servidor Next.js 14.1 no Vercel

Corrigindo problemas de acesso a arquivos em ações do servidor Next.js 14.1 usando vários métodos

Para acessar com segurança os arquivos locais em produção, esta solução utiliza um backend Node.js com uma rota 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');
  }
}

Em seguida, use a configuração modular do Webpack para copiar arquivos. Builds de produção para JavaScript

Para garantir que os arquivos locais sejam agrupados adequadamente na produção, esta abordagem altera as configurações do 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;
  },
};

Acessando arquivos dinamicamente usando rotas de API em vez de ações de servidor

Com esse método, usamos rotas de API em vez de acesso dinâmico a arquivos para fornecer serviços de arquivos locais prontos para produção.

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

Teste de unidade para acesso a arquivos na API Route

Este teste de unidade confirma que um arquivo PDF é servido adequadamente pela rota da 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');
  });
});

Perguntas comuns sobre como lidar com arquivos locais em ações do servidor Next.js

1. Como posso garantir que os arquivos locais estejam disponíveis na produção?
2. Por incluir CopyPlugin na configuração do Webpack, você pode garantir que os ativos locais, como PDFs e fontes, sejam agrupados na construção e disponibilizados.
3. Por que recebo erros ENOENT na produção?
4. A razão para este erro é que em sistemas como o Vercel, os arquivos ou diretórios que você está tentando acessar não foram incluídos na construção de produção.
5. Quero acessar arquivos, mas posso utilizar rotas de API em vez de ações do servidor?
6. Sim, você pode ter controle adicional e garantir que os arquivos sejam fornecidos corretamente em um ambiente de produção transferindo a funcionalidade de acesso a arquivos para uma rota API.
7. Qual é a função de process.cwd() nos caminhos de arquivos?
8. process.cwd() fornece o diretório de trabalho atual, auxiliando na criação dinâmica de caminhos de arquivos independentes das variações do ambiente.
9. Devo usar @vercel/blob para armazenamento de arquivos?
10. Embora @vercel/blob seja uma opção, ele pode causar atrasos em processos como a produção de PDF. Opções mais rápidas podem ser rotas de API ou acesso direto a arquivos.

Considerações finais sobre como lidar com o acesso a arquivos locais

Acessar arquivos locais pode ser uma grande dificuldade ao usar ações de servidor no Next.js 14.1, principalmente no Vercel. No entanto, os desenvolvedores podem garantir que seus arquivos estejam compactados e disponíveis na produção usando tecnologias como CopyPlugin do Webpack e rotas de API.

Você pode evitar quaisquer problemas concentrando-se em técnicas dinâmicas de manipulação de arquivos, como mudar a funcionalidade do arquivo para rotas de API. Mais pesquisas sobre técnicas de acesso a arquivos poderão resultar em soluções ainda mais eficazes para implantações posteriores.