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.js

module.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"