Next.js: How To Use Source-map-explorer With Next.js

I want to analyze my Next.js build with source-map-explorer. Can someone please help me with the script? With React (CRA), I use the following script: 'build:analyze': 'npm run bui

Solution 1:

I recently configured the next.js with source-map-explorer.

Follow these steps:

1. Install source-map-explorer:

   npm install -D source-map-explorer
   

2. Update the next.config.js file:

   module.exports = {
     productionBrowserSourceMaps: true// ...Other configs if any.
   }
   

   • Note: This makes the build process slower.

3. Add scripts:

   "scripts":{"analyze":"source-map-explorer .next/static/**/*.js","build":"next build","build:analyze":"npm run build && npm run analyze"}

PS: You might need to delete the .next folder and then run the command if source maps are generated.

Solution 2:

You'll need to enable source map generation for the production build in your next.config.js file as it's disabled by default.

// next.config.jsmodule.exports = {
    productionBrowserSourceMaps: true
}

You can then modify your npm script to target the right folder within the .next directory.

"build:analyze":"npm run build && source-map-explorer .next/static/**/*.js"