管理 Vercel 上的 Next.js 14.1 服务器操作的本地文件访问

使用各种方法修复 Next.js 14.1 服务器操作中的文件访问问题

为了安全地访问生产中的本地文件，该解决方案利用带有 API 路由的 Node.js 后端。

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

接下来，使用模块化 Webpack 配置来复制文件。JavaScript 的生产版本

为了保证本地文件在生产中正确捆绑，这种方法改变了 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;
  },
};

使用 API 路由而不是服务器操作动态访问文件

通过这种方法，我们使用 API 路由而不是动态文件访问来提供生产就绪的本地文件服务。

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

API 路由中文件访问的单元测试

此单元测试确认 API 路由正确地提供了 PDF 文件。

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

有关在 Next.js 服务器操作中处理本地文件的常见问题

1. 如何确保本地文件在生产中可用？
2. 通过包含 CopyPlugin 在 Webpack 配置中，您可以确保将本地资源（例如 PDF 和字体）捆绑到构建中并可供访问。
3. 为什么我在生产中会遇到 ENOENT 错误？
4. 出现此错误的原因是在 Vercel 等系统中，您尝试访问的文件或目录未包含在生产版本中。
5. 我想访问文件，但是我可以使用 API 路由而不是服务器操作吗？
6. 是的，通过将文件访问功能转移到 API 路由，您可以拥有额外的控制权并保证在生产环境中正确提供文件。
7. process.cwd() 在文件路径中的作用是什么？
8. process.cwd() 提供当前工作目录，有助于动态创建独立于环境变化的文件路径。
9. 我应该使用 @vercel/blob 进行文件存储吗？
10. 尽管 @vercel/blob 是一个选项，但它可能会导致 PDF 生成等流程滞后。更快的选项可以是 API 路由或直接文件访问。

关于处理本地文件访问的最终想法

在 Next.js 14.1 中使用服务器操作时，访问本地文件可能会遇到很大困难，尤其是在 Vercel 上。然而，开发人员可以使用 Webpack 的 CopyPlugin 和 API 路由等技术来确保他们的文件已打包并在生产中可用。

您可以通过专注于动态文件处理技术来避免任何问题，例如将文件功能转移到 API 路由。对文件访问技术的进一步研究可能会为以后的部署带来更有效的解决方案。