Menu

Turbopack

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

使用方法

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

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

サポートされている機能

Turbopackは、ほとんどのユーザーにとってゼロ設定であり、より高度なユースケースに対して拡張することができます。Turbopackで現在サポートされている機能について詳しく知るには、APIリファレンスを参照してください。

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

Turbopackは現在、next devのみをサポートしており、next buildはサポートしていません。安定性に向けて取り組んでいる最中です。

現在サポートされていない機能は以下の通りです：

  • TurbopackはLightning CSSを活用していますが、一部の低使用頻度のCSS Modulesの機能をサポートしていません
    • スタンドアロンの疑似クラスとしての: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でのルートレイアウトの自動作成。
    • この動作は現在サポートされていません。入力ファイルを変更するため、代わりにユーザーが目的の場所にルートレイアウトを手動で追加するエラーが表示されます。
  • @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
    • Next.jsでTurbopackを使用する際の従来のesmExternals構成のサポートは現在計画していません。
  • AMP。
    • 現在、Next.jsでTurbopackを使用する際のAMPサポートは計画していません。
  • Yarn PnP
    • 現在、Next.jsでTurbopackを使用する際のYarn PnPサポートは計画していません。
  • experimental.urlImports
    • 現在、Next.jsでTurbopackを使用する際のexperimental.urlImportsサポートは計画していません。
  • :importと:exportのICSS ルール
    • 現在、Turbopackが使用するCSSパーサーであるLightning CSSがこれらのルールをサポートしていないため、Next.jsでTurbopackを使用する際の:importと:exportのICSS ルールのサポートは計画していません。
  • エッジランタイムのunstable_allowDynamic設定

トレースファイルの生成

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

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