Turbopack

Turbopack は、JavaScriptとTypeScriptに最適化された増分バンドラーでRustで書かれ、Next.jsに組み込まれています。

使用方法

Turbopackは、Next.jsのpagesディレクトリとappディレクトリの両方で、ローカル開発をより高速化するために使用できます。Turbopackを有効にするには、Next.jsの開発サーバーを実行する際に--turbopackフラグを使用してください。

package.json

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

サポートされている機能

Next.jsのTurbopackは、ほとんどのユーザーにとってゼロコンフィギュレーションが必要で、より高度なユースケースに対して拡張することができます。Turbopackで現在サポートされている機能の詳細については、APIリファレンスをご覧ください。

サポートされていない機能

Turbopackは現在のところnext devのみをサポートし、next buildはサポートしていません。安定性に向けて進展する中で、ビルドのサポートに取り組んでいます。

これらの機能は現在サポートされていません：

• Turbopackは、一部の利用頻度が低いCSSモジュールの機能をサポートしていないLightning CSSを活用しています
  • :localおよび:globalはスタンドアロンの擬似クラスとしてはサポートされていません。関数のバリアントのみサポートされています。例：:global(a)
  • CSS変数で置き換えられた@valueルール
  • :importおよび:exportのICSSルール
• 無効なCSSコメント文法としての//
  • CSSコメントは、仕様に従って/* comment */として記述する必要があります。
  • Sassのようなプリプロセッサは、この代替構文をサポートしています。
• next.config.js内のwebpack()構成
  • TurbopackはWebpackを置き換えるため、webpack構成はサポートされていません。
  • Turbopackの構成については、ドキュメントをご覧ください。
  • WebpackローダーのサブセットがTurbopackでもサポートされています。
• Babel (.babelrc)
  • Turbopackはすべての変換と最適化にSWCコンパイラを利用しており、デフォルトではBabelが含まれていません。
  • .babelrcファイルがある場合、Next.jsには有効にできる一般的なBabelプラグインがSWC変換として含まれているため、もはや必要ないかもしれません。詳細についてはコンパイラのドキュメントをお読みください。
  • ケースごとに確認してもなおBabelが必要な場合は、Turbopackのカスタムwebpackローダーのサポートを活用してbabel-loaderを含めることができます。
• App Routerでrootレイアウトを自動的に作成すること
  • この動作は現在サポートされていません。入力ファイルが変更されるため、代わりに手動で指定した場所にrootレイアウトを追加するようエラーが表示されます。
• @next/font（レガシーフォントサポート）
  • @next/fontはnext/fontに置き換えられ非推奨となり、next/fontはTurbopackで完全にサポートされています。
• Relayの変換
  • 今後の実装を予定しています。
• pages/_document.tsxでの.cssインポートのブロック
  • 現在webpackを使用しているNext.jsではpages/_document.tsxでの.cssファイルのインポートをブロックしています。
  • 将来、この警告の実装を予定しています。
• experimental.typedRoutes
  • 今後の実装を予定しています。
• experimental.nextScriptWorkers
  • 今後の実装を予定しています。
• experimental.sri.algorithm
  • 今後の実装を予定しています。
• experimental.fallbackNodePolyfills
  • 今後の実装を予定しています。
• experimental.esmExternals
  • Turbopackと併用する場合、Next.jsでのレガシーesmExternals構成をサポートする予定はありません。
• AMP
  • Turbopackと併用する場合、Next.jsでAMPをサポートする予定はありません。
• Yarn PnP
  • Turbopackを使用したNext.jsでYarn PnPをサポートする予定はありません。
• experimental.urlImports
  • Turbopackを使用したNext.jsでexperimental.urlImportsをサポートする予定はありません。
• :importと:exportのICSSルール
  • Turbopackが使用しているCSSパーサであるLightning CSSがこれらのルールをサポートしていないため、Turbopackを使用したNext.jsで:importや:exportのICSSルールをサポートする予定はありません。
• edge runtimeにおけるunstable_allowDynamic構成

トレースファイルの生成

トレースファイルは、Next.jsチームがパフォーマンス指標とメモリ使用量を調査し改善するのに役立ちます。トレースファイルを生成するには、next dev --turbopackコマンドにNEXT_TURBOPACK_TRACING=1を追加し、.next/trace.logファイルを生成してください。

Turbopackのパフォーマンスとメモリ使用量に関連する問題を報告する際には、GitHubの課題にトレースファイルを含めてください。