Next.js生产模式下新增PDF文件出现404无法访问问题

Next.js 在执行 yarn build 时，会将项目根目录 public 下的所有静态资源复制到构建产物目录（默认是 .next 文件夹下的静态资源分区）。当你启动 yarn start 时，服务是从构建产物目录加载静态资源，而非实时读取项目根目录的 public 文件夹。所以构建完成后手动添加到项目根目录 public 的 PDF 文件，并没有被同步到构建产物里，自然会返回 404。

1. 重新构建并重启服务（生产环境首选） #

把新增的 PDF 文件放到项目根目录的 public 文件夹后，重新执行：

yarn build && yarn start

新文件会被打包到构建产物中，即可通过浏览器路径正常访问。

2. 开发阶段用实时服务器（临时测试用） #

如果只是临时需要访问新增文件，不想重新构建，可以切换到开发服务器：

yarn dev

开发服务器会实时监听 public 文件夹的变化，新增文件后刷新浏览器即可访问。

3. 自定义动态静态资源服务（运行时需动态添加文件的场景） #

如果业务需要在生产运行时动态添加静态文件（无需每次重新构建），可以自定义 API 路由处理：

Pages Router 示例 #

创建 pages/api/static/[filename].js，代码如下：

import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  const { filename } = req.query;
  // 指定存放动态文件的目录，比如项目根目录下的 dynamic-public
  const filePath = path.join(process.cwd(), 'dynamic-public', filename);

  try {
    const fileBuffer = fs.readFileSync(filePath);
    res.setHeader('Content-Type', 'application/pdf');
    res.send(fileBuffer);
  } catch (err) {
    res.status(404).send('File not found');
  }
}

App Router 示例 #

创建 app/api/static/[filename]/route.js，代码如下：

import fs from 'fs';
import path from 'path';
import { NextResponse } from 'next/server';

export function GET(request, { params }) {
  const { filename } = params;
  const filePath = path.join(process.cwd(), 'dynamic-public', filename);

  try {
    const fileBuffer = fs.readFileSync(filePath);
    return new NextResponse(fileBuffer, {
      headers: {
        'Content-Type': 'application/pdf',
      },
    });
  } catch (err) {
    return new NextResponse('File not found', { status: 404 });
  }
}

使用时，把动态添加的 PDF 放到项目根目录的 dynamic-public 文件夹（需自行创建），访问路径为 /api/static/你的文件名.pdf。

内容的提问来源于stack exchange，提问作者Fabian Cardenas Aldana