Turbopack

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

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 ルール。
• next.config.js での webpack() 設定 Turbopack は webpack を置き換えるため、webpack() 設定は認識されません。代わりに turbopack 設定 を使用してください。
• AMP Next.js での Turbopack サポートは計画されていません。
• Yarn PnP Turbopack でのサポートは計画されていません。
• experimental.urlImports サポートする予定はありません。
• 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 ファイルが生成されます。GitHub の Next.js リポジトリ で問題を作成する際にこのファイルを含めると、調査の助けになります。

まとめ

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

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

バージョン変更履歴