Turbopack

Turbopack (ベータ版) は、JavaScript と TypeScript に最適化されたインクリメンタルバンドラーで、Rust で記述されており Next.js に組み込まれています。

使用方法

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

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

サポートされている機能

Next.js における Turbopack は、ほとんどのユーザーにとって設定不要で、より高度なユースケースにも拡張可能です。Turbopack で現在サポートされている機能の詳細については、API リファレンスを参照してください。

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

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

以下の機能は現在サポートされていません:

• 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 で完全にサポートされています。
• new Worker('file', import.meta.url)
  • 将来的に実装予定です。
• Relay 変換
  • 将来的に実装予定です。
• experimental.nextScriptWorkers
  • 将来的に実装予定です。
• AMP
  • Next.js における AMP の Turbopack サポートは現在予定されていません。
• Yarn PnP
  • Next.js における Yarn PnP の Turbopack サポートは現在予定されていません。
• experimental.urlImports
  • Next.js における experimental.urlImports の Turbopack サポートは現在予定されていません。

トレースファイルの生成

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

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