NextJS 13.5构建时生成的Public目录静态文件服务器端访问问题

问题原因 #

Vercel将静态资源（public目录）和Serverless函数运行环境（/var/task）分开部署，构建后脚本生成在public目录的文件只会被托管到CDN，不会被打包进Serverless函数的运行包中，因此服务器端代码无法通过本地路径读取到该文件。outputFileTracingIncludes无效是因为该配置针对的是NextJS构建过程中识别的依赖文件，自定义脚本生成的文件不在其自动追踪范围内。

解决方法 #

方法1：调整文件生成路径并配置outputFileTracingIncludes #

1. 修改你的generate-pagination脚本，将pagination.json生成到项目根目录的自定义文件夹（比如./data），而非public目录。
2. 在next.config.js中添加配置，明确将该文件纳入Serverless函数的打包范围：

/** @type {import('next').NextConfig} */
const nextConfig = {
  outputFileTracingIncludes: {
    '*': ['./data/pagination.json'], // 匹配所有路由/函数，包含目标文件
  },
}

module.exports = nextConfig

3. 服务器端代码使用绝对路径读取文件（避免相对路径歧义）：

import fs from 'fs/promises';
import path from 'path';

async function fetchPaginationData() {
  const filePath = path.join(process.cwd(), 'data', 'pagination.json');
  const fileContent = await fs.readFile(filePath, 'utf8');
  return JSON.parse(fileContent);
}

方法2：复制文件到NextJS服务器输出目录 #

如果需要保留public目录的静态访问，可在构建脚本中同时生成两份文件：一份到public供CDN访问，一份到./.next/server目录让Serverless函数读取。修改自定义构建命令为：

npm run build && npm run generate-pagination && cp public/pagination.json .next/server/

服务器端代码读取路径改为：

const filePath = path.join(process.cwd(), '.next', 'server', 'pagination.json');

方法3：通过CDN URL读取（备选） #

若以上方法不适用，可在服务器端代码中直接通过HTTP请求访问该文件的CDN地址（即你的站点域名/pagination.json），但这种方式会增加额外网络请求开销，不推荐频繁调用。

验证步骤 #

1. 重新部署项目，查看Vercel构建日志，确认文件已生成到目标目录。
2. 在服务器端代码中添加日志，打印process.cwd()的结果，确认文件路径拼接正确。

内容的提问来源于stack exchange，提问作者Daniel Hoops