Nextjs Turbopack

---
name: nextjs-turbopack
description: Next.js 16+とTurbopack — インクリメンタルバンドリング、FSキャッシング、開発速度、Turbopackとwebpackをいつどちらかどうかを選ぶか。
origin: ECC
---

# Next.jsとTurbopack

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

## 使用するタイミング

- **Turbopack（デフォルト開発）**: 日々の開発に使用する。特に大規模アプリでコールドスタートとHMRが速い。
- **Webpack（レガシー開発）**: 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`以下にある。基本的な使用には追加設定は不要。
- **バンドルアナライザー（Next.js 16.1+）**: 実験的なバンドルアナライザーで出力を検査し重い依存関係を見つける。設定または実験的フラグで有効化する（使用中のバージョンのNext.jsドキュメントを参照）。

## 例

### コマンド

```bash
next dev
next build
next start
```

### 使用方法

ローカル開発にはTurbopackで`next dev`を実行する。バンドルアナライザー（Next.jsドキュメント参照）を使用してコード分割を最適化し、大きな依存関係を削減する。可能な限りApp RouterとサーバーコンポーネントをBestPracticeとして使用する。

## ベストプラクティス

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