Next.js › Bundle Analysis & Code Splitting

How do you analyze your Next.js application's bundle size to find what is making it large?

Intermediate

Answer

You can use the official @next/bundle-analyzer package, which generates a visual report showing exactly which packages and files take up the most space in your JavaScript bundles, making it easy to spot unexpectedly large dependencies that could be replaced or lazy loaded.

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

module.exports = withBundleAnalyzer({});

Real-world example A team runs the bundle analyzer and discovers that a date formatting library is adding a large amount of unused code, so they switch to a smaller alternative and shrink their bundle significantly.

Common follow-ups: What command do you run to generate the bundle analysis report?;How often should a team check their bundle size during development?

Turbopack & Build Performance;Web Vitals & Performance Monitoring