# Next.jsでBundle Analyzerを使う

## はじめに

この記事では Next.js で Bundle Analyzer（`@next/bundle-analyzer`）を使ってバンドルサイズを可視化する手順をまとめます。pnpm を使った環境での例を示しますが、npm / yarn でも同様です。

目的:

- ビルド時にバンドルの可視化を行い、サイズが大きいパッケージやチャンクを特定できるようにする
- ローカルで解析結果（HTML）を確認できるようにする

この記事のゴールは、下記のコマンドで解析を行い、ブラウザで結果を確認できるようにすることです。

```sh:Terminal
pnpm analyze
```

## インストール

```sh:Terminal
pnpm add -D -E @next/bundle-analyzer
```

## `next.config.js` を修正

```javascript:next.config.js
/** @type {import('next').NextConfig} */

// CommonJS (defaultのnext.config.jsがCommonJSの場合)
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
  //...
}

module.exports = withBundleAnalyzer(nextConfig)
```

ESMの例:

```javascript:next.config.mjs
import withBundleAnalyzer from '@next/bundle-analyzer'

const enabled = process.env.ANALYZE === 'true'

const nextConfig = {
  // ...
}

export default withBundleAnalyzer({ enabled })(nextConfig)
```

## `package.json` のscriptsを修正

```json:package.json
{
  "scripts": {
    "analyze": "ANALYZE=true next build"
  },
}
```

以上でBundle Analyzerでバンドルサイズの確認ができるようになります。

## 実行と結果の確認

1. 解析を実行

   ```sh:Terminal
   pnpm analyze
   ```

2. 出力場所

   解析結果はビルド出力の下に `.next/analyze` 配下に HTML として出力されます。生成されるファイルは環境や Next.js のバージョンによって若干変わることがありますが、基本的には HTML ファイルなのでブラウザで開いて確認できます。

3. ローカルで見る（簡易サーブ）

   macOS / Linux で簡単に開く方法:

   ```sh:Terminal
   # Finder / ファイルブラウザで開く（macOS）
   open .next/analyze/index.html

   # もしくは簡易HTTPサーバで配信してブラウザで確認
   npx http-server .next/analyze -c-1
   # または
   npx serve .next/analyze
   ```

> [!WARNING]
>
> - Next.js の新しいビルドツールである Turbopack を使っている場合（`--turbopack` オプション）や、Next の将来バージョンでは本プラグインが動作しないことがあります。Bundle Analyzer は主に webpack ベースのビルド向けです。
> - `ANALYZE=true next build` のように環境変数で有効化する方法は macOS / Linux ではそのまま動作しますが、Windows の CMD では動きません。クロスプラットフォームに対応するには `cross-env` を使ってください。
> - 大きなバンドルが見つかったら、dynamic imports（動的 import）、コード分割、不要な polyfill の削除、依存先の見直しなどで対処します。

## 便利なスクリプト例

```json:package.json
"scripts": {
  "analyze": "ANALYZE=true next build",
  "analyze:open": "pnpm analyze && open .next/analyze",
  "analyze:server": "pnpm analyze && npx http-server .next/analyze -c-1"
}
```

- `analyze:open`: 解析結果を開く（macOS 向け）
- `analyze:server`: Dev Containerを使用している場合などは簡易HTTPサーバで配信してブラウザで確認

以上で Bundle Analyzer によるバンドル確認が可能になります。

## 公式ドキュメント

::link-card[https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer]