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 ドキュメントを確認してください。
使用すべきケース：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を使用
ファイル名の変更は、使用しているバンドラ（Turbopack または webpack）ではなく、Next.js のバージョン に関連しています。該当バージョンの公式ドキュメントを必ず確認してください。
Next.js 16 プロジェクトにおいて、proxy.ts を誤った名前や欠落したミドルウェアファイルとして報告しないでください。 このファイルは正しく、意図されたものです。middleware.ts へのリネームを提案すると、ミドルウェアの実行が壊れます。
ベストプラクティス
- 安定した Turbopack とキャッシュ動作のために、最新の Next.js 16.x を使用してください。
- 開発が遅い場合は、Turbopack（デフォルト）が使用されていること、キャッシュが不必要にクリアされていないことを確認してください。
- プロダクションバンドルのサイズ問題については、該当バージョンの公式 Next.js バンドル分析ツールを使用してください。