Next.js と Turbopack

Next.js 16+ はローカル開発時にデフォルトで Turbopack を使用します。Turbopack は Rust で書かれたインクリメンタルバンドラーで、開発の起動速度とホットアップデートを大幅に高速化します。

使用時期

• Turbopack（デフォルト dev）: 日々の開発に使用してください。特に大規模アプリでは、コールドスタートと HMR が高速です。
• Webpack（レガシー dev）: Turbopack のバグに遭遇した場合、または開発環境で webpack 専用プラグインに依存している場合のみ使用してください。--webpack フラグで無効化できます（または Next.js のバージョンによっては --no-turbopack；お使いのリリースのドキュメントを確認してください）。
• 本番環境: 本番ビルド（next build）の動作は Next.js のバージョンによって Turbopack または webpack を使用することがあります。お使いのバージョンの公式 Next.js ドキュメントを確認してください。

用途: Next.js 16+ アプリの開発またはデバッグ、遅い開発スタートアップまたは HMR の診断、本番バンドルの最適化。

仕組み

• Turbopack: Next.js 開発用のインクリメンタルバンドラー。ファイルシステムキャッシュを使用するため、再起動がはるかに高速です（例えば、大規模プロジェクトでは 5～14 倍）。
• 開発時のデフォルト: Next.js 16 以降、next dev は無効にしない限り Turbopack で実行されます。
• ファイルシステムキャッシング: 再起動時に前回の作業を再利用します。キャッシュは通常 .next 配下にあり、基本的な使用では追加の設定は不要です。
• Bundle Analyzer（Next.js 16.1+）: 出力を検査して重いの依存関係を見つけるための実験的な Bundle Analyzer。設定または実験的フラグを有効にして使用してください（お使いのバージョンの Next.js ドキュメントを参照）。

例

コマンド

next dev
next build
next start

使用方法

ローカル開発には next dev を実行して、Turbopack で開発してください。Bundle Analyzer（Next.js ドキュメント参照）を使用してコード分割を最適化し、大きな依存関係を削減してください。可能な限り App Router とサーバーコンポーネントを優先してください。

ベストプラクティス

• 安定した Turbopack とキャッシング動作のために、最新の Next.js 16.x を使用し続けてください。
• 開発が遅い場合は、Turbopack（デフォルト）を使用していることを確認し、キャッシュが不要にクリアされていないことを確認してください。
• 本番バンドルサイズの問題については、お使いのバージョンの公式 Next.js バンドル分析ツールを使用してください。