We are working on a Next.js 14 project where we fetch data from 5 to 6 APIs at build time and store the responses in separate JSON files. This allows us to reuse API data across multiple pages without making redundant API calls. Our implementation works perfectly in local development, where the JSON files get updated as expected. However, after deploying to production the JSON files do not update, and the application continues using old data. Code Flow: Fetching API Data and Writing to JSON Files (At Build Time)

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),
  );
};

Expected Behavior: In development, the JSON files should update each time new data is fetched. In production, the JSON files should also update when new data is fetched. Actual Behavior: Locally: The JSON files update correctly. production: The JSON files do not update after deployment, and old data is used instead. Questions: Why are the JSON files not updating after deployment? How can we ensure that API data is persisted properly across deployments in Next.js 14? Is writing API responses to JSON files the best way to cache API data across multiple pages in Next.js, or is there a better approach?

We are working on a Next.js 14 project where we fetch data from 5 to 6 APIs at build time and store the responses in separate JSON files. This allows us to reuse API data across multiple pages without making redundant API calls. Our implementation works perfectly in local development, where the JSON files get updated as expected. However, after deploying to production the JSON files do not update, and the application continues using old data. Code Flow: Fetching API Data and Writing to JSON Files (At Build Time)

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),
  );
};

Expected Behavior: In development, the JSON files should update each time new data is fetched. In production, the JSON files should also update when new data is fetched. Actual Behavior: Locally: The JSON files update correctly. production: The JSON files do not update after deployment, and old data is used instead. Questions: Why are the JSON files not updating after deployment? How can we ensure that API data is persisted properly across deployments in Next.js 14? Is writing API responses to JSON files the best way to cache API data across multiple pages in Next.js, or is there a better approach?

• json
• next.js
• caching
• server-side-rendering

Share Improve this question Follow edited Mar 11 at 21:39 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Mar 11 at 13:58 Hafiza Sabeeha AreejHafiza Sabeeha Areej 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In NextJs, when using env on the server, you are to use it without NEXT_PUBLIC as this specifies it should be visible on the browser. In your case, you should rename NEXT_PUBLIC_API to API or ROOT_API

const ROOT_API = process.env.ROOT_API;

More info on NextJS environment variables here.