Next.js と Turbopack
Next.js 16 以降では、ローカル開発に Turbopack がデフォルトで使用されます。Turbopack は Rust で書かれたインクリメンタルバンドラーであり、開発サーバーの起動とホットアップデートを大幅に高速化します。
使用すべきタイミング
- Turbopack（開発デフォルト）: 日々の開発に使用します。特に大規模アプリでコールドスタートと HMR が高速化されます。
- Webpack（開発レガシー）: Turbopack のバグに遭遇した場合や、開発時に webpack 専用プラグインに依存している場合のみ使用します。
--webpackまたは--no-turbopackフラグで無効化します（使用している Next.js バージョンのドキュメントを確認してください）。 - プロダクション: プロダクションビルド（
next build）の動作は Next.js のバージョンによって Turbopack または webpack のどちらかを使用します。公式ドキュメントでバージョンごとの動作を確認してください。
使用する場面: 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 とサーバーコンポーネントを優先してください。
ミドルウェアのファイル名
Next.js 16 では、ミドルウェアのファイル名が従来の middleware.ts から proxy.ts に変更されました。
- Next.js 16 以降: プロジェクトルートに
proxy.tsを使用 - Next.js 16 未満: プロジェクトルートに
middleware.tsを使用
ファイル名の変更は Next.js のバージョン に依存し、使用するバンドラー（Turbopack または webpack）には依存しません。常に確認しているバージョンの公式ドキュメントを参照してください。
Next.js 16 プロジェクトで proxy.ts を名前間違いやミドルウェアファイルの欠落として報告しないでください。 このファイルは正しく意図されたものです。middleware.ts へのリネームを提案するとミドルウェアの実行が壊れます。
ベストプラクティス
- 安定した Turbopack とキャッシュ動作を得るために、最新の Next.js 16.x を使用してください。
- 開発が遅い場合は、Turbopack（デフォルト）を使用していること、キャッシュが不必要にクリアされていないことを確認してください。
- プロダクションバンドルサイズの問題には、使用中のバージョンに対応した公式の Next.js バンドル分析ツールを使用してください。