or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-next--bundle-analyzer

Next.js configuration wrapper that integrates webpack-bundle-analyzer for bundle analysis

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@next/bundle-analyzer@15.5.x

To install, run

npx @tessl/cli install tessl/npm-next--bundle-analyzer@15.5.0

index.mddocs/

Next.js Bundle Analyzer

Next.js Bundle Analyzer is a configuration wrapper that integrates webpack-bundle-analyzer into Next.js projects. It provides a higher-order function that conditionally enables bundle analysis based on configuration, generating detailed reports for client-side, server-side (Node.js), and edge runtime bundles to help developers optimize their application bundles.

Package Information

  • Package Name: @next/bundle-analyzer
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install @next/bundle-analyzer

Core Imports

const withBundleAnalyzer = require('@next/bundle-analyzer');

For TypeScript:

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

Basic Usage

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

module.exports = withBundleAnalyzer({
  // Your Next.js config
});

Build with analysis enabled:

ANALYZE=true npm run build

This generates bundle analysis reports in <distDir>/analyze/:

  • client.html - Client-side bundle analysis
  • nodejs.html - Node.js server bundle analysis
  • edge.html - Edge runtime bundle analysis

Capabilities

Bundle Analyzer Configuration

Creates a Next.js configuration wrapper that conditionally enables webpack-bundle-analyzer.

/**
 * Creates a Next.js configuration wrapper with webpack-bundle-analyzer integration
 * @param options - Configuration options for bundle analysis
 * @returns Function that takes Next.js config and returns enhanced config
 */
function NextBundleAnalyzer(options?: {
  /** Whether to enable bundle analysis (default: true) */
  enabled?: boolean;
  /** Whether to automatically open the report in browser */
  openAnalyzer?: boolean;
  /** Output format - 'static' for HTML, 'json' for JSON data (default: 'static') */
  analyzerMode?: 'json' | 'static';
  /** Log level for bundle analyzer (default: 'info') */
  logLevel?: 'info' | 'warn' | 'error' | 'silent' | undefined;
}): (config?: NextConfig) => NextConfig;

Usage Examples:

// Basic usage with environment variable control
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Your Next.js configuration
  experimental: {
    appDir: true,
  },
});
// Advanced configuration
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
  analyzerMode: 'json',
  logLevel: 'warn',
});

module.exports = withBundleAnalyzer({
  // Your Next.js configuration
});
// Use with next-compose-plugins
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withPlugins([
  [withBundleAnalyzer],
  // other plugins here
]);
// Configuration as a function
module.exports = (phase, defaultConfig) => {
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  return withBundleAnalyzer(defaultConfig);
};

Configuration Options

The bundle analyzer accepts an options object with the following properties:

enabled

  • Type: boolean
  • Default: true
  • Description: Controls whether bundle analysis is enabled. Commonly set to process.env.ANALYZE === 'true' for conditional activation.

openAnalyzer

  • Type: boolean
  • Default: undefined (uses webpack-bundle-analyzer default)
  • Description: Whether to automatically open the bundle report in the default browser after analysis completes.

analyzerMode

  • Type: 'json' | 'static'
  • Default: 'static'
  • Description: Output format for bundle analysis reports. 'static' generates HTML files, 'json' generates JSON data files.

logLevel

  • Type: 'info' | 'warn' | 'error' | 'silent' | undefined
  • Default: 'info'
  • Description: Controls the verbosity of bundle analyzer logging output.

Types

import type { NextConfig } from 'next';

interface BundleAnalyzerOptions {
  enabled?: boolean;
  openAnalyzer?: boolean;
  analyzerMode?: 'json' | 'static';
  logLevel?: 'info' | 'warn' | 'error' | 'silent' | undefined;
}

type ConfigEnhancer = (config?: NextConfig) => NextConfig;

Output Files

When enabled, the bundle analyzer generates reports in the following locations within your Next.js build output directory:

  • Client Bundle: analyze/client.html (or .json)

    • Analysis of the client-side JavaScript bundle
    • Shows modules included in the browser bundle

  • Node.js Server Bundle: analyze/nodejs.html (or .json)

    • Analysis of the server-side bundle for Node.js runtime
    • Shows server-side modules and dependencies

  • Edge Runtime Bundle: analyze/edge.html (or .json)

    • Analysis of the edge runtime bundle
    • Shows modules optimized for edge computing environments

Installation Notes

If installing as a devDependency, wrap the require in a process.env check in your next.config.js since the config file is loaded during next start:

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

module.exports = withBundleAnalyzer({
  // Your Next.js config
});

Dependencies

This package depends on webpack-bundle-analyzer@4.10.1 which provides the core bundle analysis functionality.