Next.js と Turbopack は何をしますか?
Next.js 16+ では、ローカル開発にデフォルトで 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 とサーバーコンポーネントを優先してください。
ベストプラクティス
- 安定した Turbopack とキャッシュ動作のために、最新の Next.js 16.x を使用してください。
- 開発が遅い場合は、Turbopack(デフォルト)を使用していること、キャッシュが不必要にクリアされていないことを確認してください。
- プロダクションバンドルサイズの問題には、ご利用のバージョンに応じた公式の Next.js バンドル分析ツールを使用してください。