Since Next.js is becoming the most popular choice with Sitecore projects which is a great and very powerful combination, I want to share an important security point that you maybe missing or have not noticed yet.

When working with Next.js in Sitecore XM Cloud or Sitecore Headless JSS projects, one common issue is that the source code can accidentally be exposed in production.

This usually happens because of how productionBrowserSourceMaps is configured in Next.js. Source maps are useful for debugging, but if they’re enabled in production, anyone can inspect your original code through the browser. That’s not only a security concern, but also something that you do not want to be visible in a live environment.

Please note that this might still be an issue if you have used Sitecore JSS starter kit to create your Next.js project.

If you enable productionBrowserSourceMaps without controlling it by environment, Next.js will generate source maps even for production builds. These maps are helpful in non-prod environments like Dev or QA, but in production they can expose your entire codebase.

The Right Fix: Use Environment Variables

The best practice is to control this setting with environment variables. This allows you to enable source maps in non-prod environments and automatically disable them for production.

Step 1: Define Environment Variables

In your .env.local, .env.development, .env.production, etc., add something like below.

Note: Make sure to also add this to your hosting environment’s variable such as Vercel, Azure or Netlify.

# For non-prod environments
NEXT_ENABLE_SOURCEMAPS=true

# For production
NEXT_ENABLE_SOURCEMAPS=false

Step 2: Update next.config.js

Use the variable in your Next.js config:

const nextConfig = {
  productionBrowserSourceMaps: process.env.NEXT_ENABLE_SOURCEMAPS === 'true',
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

Step 3: Verify

• Build and deploy in non-prod environments → source maps should be generated.
• Build and deploy in production environment → source maps should NOT be generated.

To verify, you can open Developer Tools in browser and check the Sources tab and see if _N_E folder exists or not as shown in the above screenshot.

Why This Matters in Sitecore Projects

In Sitecore XM Cloud or JSS setups, projects often have multiple environments (DEV, QA, UAT, PROD). Debugging is important in non-prod, but production should always prioritize performance and security.

By toggling productionBrowserSourceMaps through environment variables, you get the flexibility for developers while ensuring production stays secure.

Hashtags

#Sitecore,#Nextjs,#SitecoreXMCloud,#JSS,#WebDevelopment,#SourceMaps,#JavaScript,#Security,#Frontend,#DevOps,#EnvironmentVariables,#ProductionReady,#CodingTips