Headless/JSS 20 NextJS Prefetch mode

Question

We're building a NextJS app using JSS 20.

Next's prefetching behavior differs from local development: On production environments any links on a page are prefetched (for performance reasons), on local development Next will fetch an URL whenever you browse to it.

Is there a way to make Sitecore JSS NextJS behave like that on production environments as well? We don't want to prefetch all pages, we want Next to fetch the target page whenever we click a link, just like it does in next:dev mode.

I'm quite sure I've seen Sitecore JSS NextJS sites behave like this on production mode, but can't figure out how. Neither Sitecore or NextJS seems to have any decent documentation about it.

We're running our NextJS app on Azure Container Apps using Docker. The docker command is RUN npm run build and cmd npm start.

Answer 1

In your Dockerfile, you can set the NODE_ENV environment variable like this

ENV NODE_ENV=production

Next step is to disable prefetch in production. Modify next.config.js file:

module.exports = (phase, { defaultConfig }) => {
  const isDev = phase === "development";

  const config = {
    // Add your default config here
    ...defaultConfig,
    // Disable prefetching on production
    productionBrowserSourceMaps: false,
    experimental: {
      prefetch: false,
    },
  };

  if (isDev) {
    // Enable prefetching in development
    config.experimental.prefetch = true;
    config.productionBrowserSourceMaps = true;
  }

  return config;
};