Next.js 14部署后构建时生成的JSON文件不更新问题咨询

我们正在开发一个Next.js 14项目，在构建阶段从5-6个API获取数据并存储到独立JSON文件中，以此实现多页面复用API数据、避免重复调用。本地开发时JSON文件可正常更新，但部署到生产环境后，JSON文件不再更新，应用持续使用旧数据。

代码流程 #

构建阶段获取API数据并写入JSON文件 #

require("dotenv").config();
const fs = require("fs");

const ROOT_API = process.env.NEXT_PUBLIC_API;
const headers = {
  "Content-Type": "application/json",
  ecom: "native",
  "Cache-Control": "no-store, no-cache, must-revalidate",
  Pragma: "no-cache",
  Expires: "0",
};

module.exports.preBuildPro = async () => {
  const [
    responseSite,
    responseFooter,
    responseBanner,
    redirectRes,
    responseManufacturer,
    responseContentfulManufacturers,
  ] = await Promise.all([
    fetch(`${ROOT_API}/content/site-navigation`, { headers }),
    fetch(`${ROOT_API}/yotpo/rating`, { headers }),
    fetch(`${ROOT_API}/content/announcements`, { headers }),
    fetch(`${ROOT_API}/content/redirect`, { headers }),
    fetch(`${ROOT_API}/products/manufacturers`, { headers }),
    fetch(`${ROOT_API}/content/manufacturers-list`, { headers }),
  ]);

  const siteData = await responseSite.json();
  const yotpoData = await responseFooter.json();
  const bannerData = await responseBanner.json();
  const redirects = await redirectRes.json();
  const responseManufacturers = await responseManufacturer.json();
  const contentfulManufacturers = await responseContentfulManufacturers.json();

  fs.writeFileSync("./src/app/lib/utils/preBuild/siteContent.json", JSON.stringify(siteData.data));
  fs.writeFileSync(
    "./src/app/lib/utils/preBuild/footerData.json",
    JSON.stringify(yotpoData.rating),
  );
  fs.writeFileSync("./src/app/lib/utils/preBuild/bannerData.json", JSON.stringify(bannerData.data));
  fs.writeFileSync("./src/app/lib/utils/preBuild/redirects.json", JSON.stringify(redirects.data));
  fs.writeFileSync(
    "./src/app/lib/utils/preBuild/manufacturers.json",
    JSON.stringify(responseManufacturers.data),
  );
  fs.writeFileSync(
    "./src/app/lib/utils/preBuild/contentfulManufacturers.json",
    JSON.stringify(contentfulManufacturers.data),
  );
};

期望行为 #

• 开发环境：每次获取新数据时JSON文件应更新
• 生产环境：获取新数据时JSON文件也需更新

实际行为 #

• 本地开发时JSON文件更新正常
• 生产部署后JSON文件不更新，应用使用旧数据

技术问询 #

1. 部署后JSON文件无法更新的原因是什么？
2. 如何确保Next.js 14中API数据在部署后能正确持久化更新？
3. 将API响应写入JSON文件是否是Next.js跨页面缓存API数据的最优方案，有无更好的替代方案？

1. 部署后JSON文件无法更新的原因 #

核心问题在于你当前的逻辑只在构建阶段执行：

• 本地开发时，Next.js开发服务器会在代码变更时触发重新构建，preBuildPro脚本随之运行，所以JSON文件能更新。
• 生产环境部署完成后，服务器运行的是已打包的静态产物，此时fs.writeFileSync无法修改只读的生产文件系统；而且部署完成后不会再自动触发构建流程，旧数据会一直被复用。
  另外，请求头里的Cache-Control配置只影响API请求本身的缓存，和JSON文件的复用逻辑无关。

2. 确保生产环境API数据持久化更新的方案 #

根据数据更新频率，有两种可行方向：

方案一：定时触发重新部署

如果API数据更新频率低（比如每天/每周），可以配置部署平台（Vercel、Netlify等）的定时重新部署，每次部署时重新拉取最新API数据生成JSON文件。比如用GitHub Actions定时触发部署，或使用平台自带的定时部署功能。

方案二：运行时动态获取+内置缓存

如果需要更实时的更新，放弃构建阶段写JSON的方式，改用Next.js运行时缓存机制：

import { unstable_cache } from 'next/cache';

// 封装带缓存的API请求
const fetchSiteData = unstable_cache(
  async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API}/content/site-navigation`, {
      headers: {
        "Content-Type": "application/json",
        ecom: "native",
      },
    });
    return res.json();
  },
  ['site-navigation-data'], // 唯一缓存键
  { revalidate: 3600 } // 每3600秒自动刷新缓存
);

// 在Server Component中使用
export default async function Page() {
  const siteData = await fetchSiteData();
  // 渲染页面内容
}

这种方式下，Next.js会自动缓存API响应，到期后自动拉取最新数据，无需手动维护文件，生产环境也能实时更新。

3. JSON文件方案是否最优？替代方案是什么？ #

JSON文件方案不是最优，它的局限性很突出：只能在构建阶段更新、生产环境文件系统只读、数据更新依赖重新部署，灵活性极差。

更好的替代方案：

1. Next.js内置缓存（推荐）：
   直接用fetch的cache和revalidate配置，或unstable_cache，让Next.js自动管理缓存，跨页面复用API数据，还能配置自动刷新时间。无需额外维护，Next.js会处理缓存存储（内存+磁盘），适配大多数场景。

2. 客户端全局状态管理：
   如果数据需要在客户端跨页面复用，可用React Context、Zustand或Redux等工具，首次获取数据后存入全局状态，后续页面直接读取。缺点是页面刷新会重新请求，适合高频变化但不需要服务端缓存的数据。

3. 外部缓存存储：
   若数据量大或需要精细缓存控制，可使用Redis等外部缓存服务，服务端请求API后将数据存入Redis，后续请求直接读取缓存，到期后重新拉取。适合复杂场景，但需要额外维护缓存服务。

内容的提问来源于stack exchange，提问作者Hafiza Sabeeha Areej