CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-next--bundle-analyzer

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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.

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