ShukurDev - BlogHow To Analyze Your NEXT.JS 14 App Bundle Size With These 3 Lines of Code

Why Analyze Bundle Size?

• Performance Optimization: Smaller bundles mean faster load times.
• Improved SEO: Faster sites are favored by search engines.
• Better User Experience: Reduced load times lead to happier users.

Step 1: Install @next/bundle-analyzer

First, you need to install the @next/bundle-analyzer package as a development dependency. Open your terminal and run:

npm install --save-dev @next/bundle-analyzer

Step 2: Configure Next.js with Bundle Analyzer

Next, you need to update your Next.js configuration file to include the bundle analyzer. If you're using ES modules (as with .mjs files), you will use the import syntax.

Create or update your next.config.mjs file:

// next.config.mjs

import withBundleAnalyzer from '@next/bundle-analyzer';

const bundleAnalyzer = withBundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});

const nextConfig = {};

export default bundleAnalyzer(nextConfig);


Step 3: Run the Build with Analysis

To analyze your bundle, you need to set the ANALYZE environment variable to true and then run the build command. This generates a detailed report of your bundle size.

ANALYZE=true npm run build

Viewing the Report

After the build process completes, a new report will be generated. You can find the report in the .next folder. Open the generated report in your browser to see a detailed visualization of your bundle size.