Next.js项目自定义文件夹部署到Vercel生产环境无法读取如何解决

问题根因 #

Next.js部署到Vercel时，运行环境只会保留构建后必要的系统文件、.next构建产物、依赖包等内容，你在根目录自定义的jsonfiles文件夹不属于默认的运行时包含资源，因此部署后会被剔除，自然无法通过相对路径读取到。本地开发时根目录所有文件都完整保留，所以读取不会出错。

可用解决方案 #

方案1：直接导入JSON（最推荐） #

Next.js原生支持直接导入JSON文件，无需使用fs模块读取，完全规避路径问题，性能最优，适合JSON内容无需运行时动态修改的场景：

// 按文件相对路径直接导入即可，构建时会自动处理JSON内容
import list from '../jsonfiles/list.json'
// 无需手动JSON.parse，导入后可直接使用

方案2：将jsonfiles移入public目录 #

如果你的JSON文件需要同时支持服务端读取和前端直接请求，可以把jsonfiles文件夹整体移动到项目根目录的public文件夹下，public目录的所有资源都会默认被保留到部署环境：

• 移动后文件路径：public/jsonfiles/list.json
• 服务端读取代码修改为如下（必须使用绝对路径，不要用相对路径）：

const fs = require('fs')
const path = require('path')
// 用process.cwd()拼接绝对路径
const filePath = path.join(process.cwd(), 'public', 'jsonfiles', 'list.json')
const rawContent = fs.readFileSync(filePath, 'utf8')
const list = JSON.parse(rawContent)

前端也可以直接通过/jsonfiles/list.json路径请求该文件。

方案3：配置构建规则保留jsonfiles文件夹 #

如果你不想修改现有文件夹结构，可以在next.config.js中配置输出文件跟踪规则，强制让Next.js构建时把jsonfiles文件夹纳入运行时资源：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    outputFileTracingIncludes: {
      // 配置所有路由都包含根目录的jsonfiles文件夹
      '/*': ['./jsonfiles/**/*'],
    },
  },
}

module.exports = nextConfig

配置完成后读取文件同样需要使用绝对路径：

const fs = require('fs')
const path = require('path')
const filePath = path.join(process.cwd(), 'jsonfiles', 'list.json')
const rawContent = fs.readFileSync(filePath, 'utf8')
const list = JSON.parse(rawContent)

注意：你原有代码中的fs.readSync是低阶文件操作API，普通读取文件建议使用fs.readFileSync并指定utf8编码，否则会拿到Buffer类型的数据无法直接parse。

内容的提问来源于stack exchange，提问作者Mohammad Reza Hosainy