メインコンテンツまでスキップ

Turbopack

Turbopackは、JavaScriptとTypeScript向けに最適化されたインクリメンタルバンドラーで、Rustで書かれ、Next.jsに組み込まれています。

使用法​

Turbopackは、Next.jsにおいてpagesディレクトリとappディレクトリの両方で使用可能で、ローカル開発を高速化します。Turbopackを有効にするには、Next.jsの開発サーバーを起動するときに--turbopackフラグを使用します。

package.json
{
  "scripts": {
    "dev": "next dev --turbopack", // 開発サーバーをTurbopackモードで起動します
    "build": "next build", // ビルド処理を実行します
    "start": "next start", // ビルドされたアプリケーションを起動します
    "lint": "next lint" // コードのリンティングを実行します
  }
}

サポートされている機能​

Next.jsのTurbopackは、ほとんどのユーザーに対して設定不要で使用でき、より高度なユースケースに合わせて拡張可能です。現在サポートされているTurbopackの機能について詳しく知りたい場合は、APIリファレンスを参照してください。

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

現在、Turbopackはnext devのみをサポートし、next buildはサポートしていません。安定性の向上に向けてビルドサポートの作業を進めています。

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

  • Turbopackは、いくつかの使用率の低いCSS Modules機能をサポートしていないLightning 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ルール
    • :importおよび:export ICSSルールは、Turbopackが使用するCSSパーサーであるLightning CSSがこれらのルールをサポートしていないため、現状ではTurbopackを使用したNext.jsでのサポートを予定していません。
  • edge runtimeにおけるunstable_allowDynamic設定

トレースファイルの生成​

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

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