Menu

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 Modules機能をサポートしていません
    • スタンドアロンの疑似クラスとしての:localと:global。関数バリアントのみがサポートされています（例：:global(a)）。
    • CSS変数に取って代わられた@valueルール。
    • :importと:exportのICSSルール。
  • //のような無効なCSSコメント構文
    • CSSコメントは仕様に従って/* コメント */として記述する必要があります。
    • 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でのルートレイアウトの自動作成。
    • この動作は現在サポートされていません。入力ファイルを変更するため、代わりに目的の場所にルートレイアウトを手動で追加するよう促すエラーが表示されます。
  • @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ルールをサポートする予定はありません。
  • エッジランタイムでのunstable_allowDynamic設定

例

トレースファイルの生成

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

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