How to Analyze Bundle Size in Next.js for Better Performance

To analyze bundle size in Next.js, use the built-in command next build followed by ANALYZE=true next build or integrate @next/bundle-analyzer. These tools generate a visual report showing the size of each JavaScript chunk, helping you identify large dependencies and optimize your app.

Syntax

Next.js provides a way to analyze your bundle size using the @next/bundle-analyzer plugin. You configure it in your next.config.js file and run your build with analysis enabled.

• next.config.js: Configure the analyzer plugin.
• ANALYZE=true next build: Run build with analysis.
• Open the generated /.next/analyze/client.html file to see the report.

javascript

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
})

Example

This example shows how to set up @next/bundle-analyzer in your Next.js project to generate a bundle size report after building.

javascript

/* next.config.js */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
})

// Then run in terminal:
// ANALYZE=true npm run build

// After build, open .next/analyze/client.html in your browser to see the bundle report.

Output

Build completed. Bundle analyzer report generated at .next/analyze/client.html

Common Pitfalls

Common mistakes when analyzing bundle size in Next.js include:

• Not enabling the analyzer by forgetting to set ANALYZE=true.
• Running next dev instead of next build, which does not generate the report.
• Ignoring dynamic imports that can reduce bundle size by code splitting.
• Not checking both client and server bundles if relevant.

Always use dynamic imports for large libraries to split code and reduce initial load.

javascript

/* Wrong: Analyzer disabled by default */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: false,
})

/* Right: Enable with environment variable */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

Quick Reference

Tips for analyzing and optimizing bundle size in Next.js:

• Use @next/bundle-analyzer to visualize bundle contents.
• Run ANALYZE=true next build to generate reports.
• Use dynamic imports (import()) to split code.
• Remove unused dependencies and code.
• Check both client and server bundles if your app uses server-side rendering.

Key Takeaways

Use the @next/bundle-analyzer plugin with ANALYZE=true to generate bundle size reports.

Run analysis only after building with next build, not during development.

Dynamic imports help reduce bundle size by splitting code.

Check the generated HTML report to identify large files and optimize accordingly.

Remove unused code and dependencies to keep bundles small.