Turbopack

Turbopack は インクリメンタルバンドラー で、JavaScript と TypeScript に最適化され、Rust で記述され Next.js に組み込まれています。Pages Router と App Router の両方で Turbopack を使用でき、大幅に高速な ローカル開発体験を実現します。

Turbopack の利点

Turbopack は Next.js のパフォーマンスを向上させるために開発されました:

• 統一されたグラフ: Next.js は複数の出力環境（クライアントとサーバーなど）をサポートしています。複数のコンパイラを管理しバンドルを結合するのは面倒です。Turbopack はすべての環境に対して 単一の統一されたグラフ を使用します。
• バンドリング vs ネイティブ ESM: 一部のツールは開発時にバンドリングをスキップし、ブラウザのネイティブ ESM に依存します。これは小さなアプリではうまく機能しますが、大規模なアプリでは過剰なネットワークリクエストにより遅くなることがあります。Turbopack は開発時にも バンドリング を行いますが、大規模アプリを高速に保つ最適化された方法で行います。
• インクリメンタル計算: Turbopack は作業をコア間で並列化し、結果を関数レベルまで キャッシュ します。一度行われた作業は Turbopack が繰り返しません。
• レイジーバンドリング: Turbopack は開発サーバーから実際にリクエストされたもののみをバンドルします。このレイジーなアプローチにより初期コンパイル時間とメモリ使用量を削減できます。

はじめに

Next.js プロジェクトで Turbopack を有効にするには、package.json ファイルの dev と build スクリプトに --turbopack フラグを追加します:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

現在、dev 用の Turbopack は安定しており、build はアルファ版です。Turbopack が安定に近づくにつれ、本番環境サポートに積極的に取り組んでいます。

サポートされている機能

Next.js の Turbopack は一般的なユースケースに対して ゼロコンフィギュレーション です。以下はデフォルトでサポートされている機能の概要と、必要に応じて Turbopack をさらに設定する方法のリファレンスです。

言語機能

フレームワークと React 機能

CSS とスタイリング

アセット

モジュール解決

パフォーマンスと Fast Refresh

サポートされていない機能と未計画の機能

以下の機能はまだ実装されていないか、計画されていません:

• レガシー CSS Modules 機能
  • スタンドアロンの :local と :global 擬似クラス（関数形式の :global(...) のみサポート）。
  • @value ルール（CSS 変数に置き換えられました）。
  • :import と :export ICSS ルール。
  • .module.css での composes が .css ファイルを構成する場合。webpack では .css ファイルを CSS Module として扱いますが、Turbopack では .css ファイルは常にグローバルです。CSS Module で composes を使用するには、.css ファイルを .module.css に変更する必要があります。
  • CSS Modules での @import が .css を CSS Module としてインポートする場合。webpack では .css ファイルを CSS Module として扱いますが、Turbopack では .css ファイルは常にグローバルです。CSS Module で @import を使用するには、.css ファイルを .module.css に変更する必要があります。
• next.config.js での webpack() 設定 Turbopack は webpack を置き換えるため、webpack() 設定は認識されません。代わりに turbopack 設定を使用してください。
• AMP Next.js での Turbopack サポートは計画されていません。
• Yarn PnP Next.js での Turbopack サポートは計画されていません。
• experimental.urlImports Turbopack では計画されていません。
• experimental.esmExternals 計画されていません。Turbopack は Next.js のレガシーな esmExternals 設定をサポートしません。
• 一部の Next.js 実験的フラグ
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills これらは将来的に実装予定です。

各機能フラグとそのステータスの詳細な分類については、Turbopack API リファレンスを参照してください。

設定

Turbopack は next.config.js（または next.config.ts）の turbopack キーで設定できます。設定オプションには以下があります:

• rules ファイル変換用の追加の webpack ローダーを定義します。
• resolveAlias 手動エイリアスを作成します（webpack の resolve.alias と同様）。
• resolveExtensions モジュール解決用のファイル拡張子を変更または拡張します。
• moduleIds モジュール ID の生成方法を設定します（'named' または 'deterministic'）。
• treeShaking 開発時および将来の本番ビルドでツリーシェイキングを有効または無効にします。
• memoryLimit Turbopack のメモリ制限をバイト単位で設定します。

module.exports = {
  turbopack: {
    // 例: エイリアスとカスタムファイル拡張子を追加
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

より詳細な設定例については、Turbopack 設定ドキュメントを参照してください。

パフォーマンスデバッグ用トレースファイルの生成

パフォーマンスやメモリの問題が発生し、Next.js チームが診断するのを支援したい場合は、NEXT_TURBOPACK_TRACING=1 を dev コマンドに追加してトレースファイルを生成できます:

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

これにより .next/trace-turbopack ファイルが生成されます。このファイルを Next.js リポジトリ の GitHub イシュー作成時に含めてください。

まとめ

Turbopack は Rust ベース の インクリメンタル バンドラーで、特に大規模アプリケーションのローカル開発とビルドを高速化するために設計されています。Next.js に統合されており、ゼロコンフィグの CSS、React、TypeScript サポートを提供します。

Turbopack の改善と本番ビルドサポートの追加に取り組んでいますので、今後の更新にご期待ください。今すぐ next dev --turbopack で試して、フィードバックをお寄せください。

バージョン変更履歴