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はLightning CSSを活用しており、一部の使用頻度の低いCSSモジュール機能をサポートしていません
  • 独立した擬似クラスとしての:localと:global。関数バリアントのみがサポートされています。例：:global(a)。
  • CSS変数に置き換えられた@valueルール。
  • :importと:exportのICSSルール。
• 無効なCSSコメント構文（例：//）
  • CSSコメントは仕様に従って/* comment */と記述する必要があります。
  • Sassなどのプリプロセッサは、この代替構文をサポートしています。
• next.config.js内のwebpack()設定
  • TurbopackはWebpackを置き換えるため、webpackの設定はサポートされていません。
  • Turbopackを設定するには、ドキュメントを参照してください。
  • Turbopackでは、Webpackローダーのサブセットがサポートされています。
• 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がこれらのルールをサポートしていないため、Next.jsで:importと:exportのICSSルールをサポートする予定はありません。
• edge runtimeでのunstable_allowDynamic設定

例

トレースファイルの生成

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

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