Next.js と Turbopack
Next.js 16+ はローカル開発においてデフォルトで 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 とサーバーコンポーネントを優先します。
Middleware ファイルの命名
Next.js 16 では、middleware ファイル名として proxy.ts が導入され、以前の middleware.ts 規則に取って代わりました。
- Next.js 16+：プロジェクトルートに
proxy.tsを使用 - Next.js 16 より前：プロジェクトルートに
middleware.tsを使用
ファイル名の変更は、使用中のバンドラー（Turbopack または webpack）ではなく、Next.js のバージョンに関連付けられています。確認しているバージョンの公式ドキュメントを必ず確認してください。
Next.js 16 プロジェクトにおいて、proxy.ts を名前が間違っている、または不足している middleware ファイルとしてフラグ付けしないでください。 このファイルは正しく、意図的に配置されています。middleware.ts へのリネームを提案すると、middleware の実行が壊れます。
ベストプラクティス
- 安定した Turbopack とキャッシュ動作のために、最新の Next.js 16.x を使用し続けてください。
- 開発が遅い場合は、Turbopack（デフォルト）を使用していること、およびキャッシュが不必要にクリアされていないことを確認してください。
- プロダクションバンドルサイズの問題については、お使いのバージョンの公式 Next.js バンドル分析ツールを使用してください。