テック技報最新号へ →
コード

Next.js 16.4: next analyze でバンドルを調べ、スナップショットを比べる

Next.js 16.4 の Turbopack Bundle Analyzer（next analyze）で、大きいクライアントルート・初回表示に必要なモジュール・変更前後の差分を確かめられる。lazy() で遅延したつもりのコンポーネントが、別の場所の静的 import のせいで初回に読まれている、といった問題が見つかる。

@nextjs · 投稿 2026-10-29
#nextjs#performance#bundle#turbopack

何がわかるか

  • ルート別のサイズ一覧: 起動するとまず、クライアント側の JS が大きいルートが並ぶ。ルートを開いて表をサイズ順に並べると、何が重いかがわかる。
  • スナップショットの比較: 実行した分析は自動で保存される。最適化の前後や、依存を更新した前後を比べて、増減を測れる。
  • 初回表示に必要なモジュール: 非同期で読み込む依存を除外して、初回描画のために同期で読まれるコードだけを表示できる。
  • next analyze export で、モジュールとチャンクのつながりを JSON に書き出し、自前のツールで調べられる。

よくある落とし穴: lazy() が効いていない

tsx
'use client';
import { lazy } from 'react';
export const HeavyLoader = lazy(() => import('./HeavyComponent'));

./HeavyComponent を import しているのがこのファイルだけなら遅延される。しかし同じバンドル内の別のモジュールが import HeavyComponent from './HeavyComponent' と静的に読んでいると、結局最初から読み込まれる。共通のユーティリティファイル経由で重いライブラリごと引き込む、というのも同じ形。analyzer で import のつながりをたどって探す。

'use client' は小さく切り出す

ボタン1つのためにページ全体に 'use client' を付けると、ページ全体がクライアントのバンドルに入る。ボタンだけを小さなファイルに切り出してそこに 'use client' を書けば、残りは Server Component のままで、ブラウザに送る JS が減る（@itsthishanth の tip）。サーバー専用のコードが混ざるのを防ぐには Next.js: サーバー専用のモジュールには import 'server-only' を書く も併用する。

注意点

  • analyzer は Turbopack のモジュールグラフを使うので、Turbopack（Next.js 16 の既定）でビルドしている必要がある。
  • next/dynamic で作ったチャンクが、実行時の状態によっては RSC の描画で初回に含まれることがある。実際に読まれるかはアプリで確かめる。
  • Vercel はコーディングエージェント向けのスキル next-bundle-optimizer も公開しているが、その使い方は ai-coding 分野の範囲なのでここでは扱わない。

出典

X の元の投稿を開く