Next.js如何配置不打包嵌入JSON文件 支持容器部署时直接替换

方案1：将JSON文件托管到public目录（适配客户端+服务端全场景） #

• 把你的业务JSON文件放到项目根目录的public/文件夹下，比如路径定义为public/config/business.json
• 停止使用import xxx from './xxx.json'的静态引入方式，改为运行时动态读取：
  • 服务端组件/接口路由场景：用Node.js的fs模块读取物理路径，路径可通过process.cwd()拼接，示例代码：

    import fs from 'fs/promises'
    import path from 'path'
    
    async function getBusinessData() {
      const jsonPath = path.join(process.cwd(), 'public', 'config', 'business.json')
      const rawData = await fs.readFile(jsonPath, 'utf8')
      return JSON.parse(rawData)
    }
    

  • 客户端组件场景：用fetch请求静态资源路径，示例代码：

    async function getBusinessData() {
      const res = await fetch('/config/business.json')
      return res.json()
    }
    

• 该方案下public目录的文件构建时会原样复制到产物目录，不会被内联到JS代码中，部署时直接替换容器内/app/public/config/business.json路径的文件即可生效，无需重新构建镜像。

方案2：自定义外置配置目录（适合不想改动静态资源路径的场景） #

• 在next.config.js中开启output: 'standalone'（Docker化部署推荐默认开启，可大幅减小镜像体积）
• 在项目根目录新建独立的business-config/文件夹存放目标JSON文件，在Dockerfile中添加配置目录复制逻辑：

  # 复制构建产物步骤之后添加
  COPY business-config/ /app/business-config/
  

• 代码中通过fs动态读取/app/business-config/下的JSON文件即可，构建时该目录不会被打包进代码产物，仅作为独立目录存在于镜像中。

注意事项 #

• 如果使用App Router并开启了局部预渲染，需要在读取JSON的路由/组件中添加export const dynamic = 'force-dynamic'配置，避免构建时预渲染将JSON内容固化到静态页面中。
• 结合你的Helm部署场景，可以直接将JSON内容存放在ConfigMap中，挂载到容器对应的JSON路径，仅需修改ConfigMap并重启Pod即可完成配置更新，无需修改镜像本身。

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