Turbopack

Turbopackは、JavaScriptとTypeScriptに最適化されたインクリメンタルなバンドラーであり、Rustで書かれており、Next.jsに組み込まれています。Pages RouterとApp Routerの両方でTurbopackを使用することで、はるかに高速なローカル開発体験が得られます。

Turbopackとは？

Next.jsのパフォーマンスを向上させるためにTurbopackを構築しました。その理由として、以下が挙げられます。

• 統合されたグラフ: Next.jsは複数の出力環境 (例: クライアントとサーバー) をサポートしています。複数のコンパイラを管理し、バンドルを結合するのは面倒な場合があります。Turbopackは、すべての環境に対して単一の統合されたグラフを使用します。
• バンドル vs ネイティブESM: 一部のツールは開発中にバンドルをスキップし、ブラウザのネイティブESMに依存しています。これは小さなアプリではうまく機能しますが、過剰なネットワークリクエストのために大規模なアプリでは速度が低下する可能性があります。Turbopackは開発時にバンドルを行いますが、大規模なアプリを高速に保つために最適化された方法で行います。
• インクリメンタルな計算: Turbopackは、複数のコアにわたって作業を並列化し、関数レベルまで結果をキャッシュします。一度行われた作業は、Turbopackによって繰り返されません。
• 遅延バンドル: Turbopackは、開発サーバーによって実際に要求されたもののみをバンドルします。この遅延アプローチにより、初回コンパイル時間とメモリ使用量を削減できます。

始める

Next.jsプロジェクトでTurbopackを有効にするには、`package.json` ファイルの `dev`、`build`、および `start` スクリプトに `--turbopack` フラグを追加します。

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start --turbopack"
  }
}

現在、`dev` 用のTurbopackは安定版ですが、`build` はアルファ版です。Turbopackが安定版に近づくにつれて、本番環境のサポートに積極的に取り組んでいます。

サポートされている機能

Next.jsのTurbopackは、一般的なユースケースに対してゼロコンフィグです。以下に、標準でサポートされている機能の概要と、必要に応じてTurbopackをさらに設定する方法への参照を示します。

言語機能

フレームワークとReactの機能

CSSとスタイリング

アセット

機能	ステータス	備考
静的アセット (画像、フォント)	サポート済み	`import img from './img.png'` のインポートは標準で機能します。Next.jsでは、`` コンポーネント用のオブジェクトを返します。
JSONインポート	サポート済み	`.json` からの名前付きまたはデフォルトインポートはサポートされています。

モジュール解決

パフォーマンスと高速リフレッシュ

未サポートおよび未計画の機能

一部の機能はまだ実装されていないか、計画されていません。

• レガシーCSS Modules機能
  • スタンドアロンの `:local` および `:global` 擬似クラス (関数形式の `:global(...)` のみがサポートされています)。
  • `@value` ルール (CSS変数に置き換えられました)。
  • `:import` および `:export` ICSSルール。
• `next.config.js` の`webpack()` 設定 Turbopackはwebpackを置き換えるため、`webpack()` の設定は認識されません。代わりに`experimental.turbo` 設定を使用してください。
• AMP Next.jsでのTurbopackサポートは計画されていません。
• Yarn PnP Next.jsでのTurbopackサポートは計画されていません。
• `experimental.urlImports` Turbopackでは計画されていません。
• `experimental.esmExternals` 計画されていません。TurbopackはNext.jsのレガシーな `esmExternals` 設定をサポートしていません。
• 一部のNext.js実験的フラグ
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • `experimental.fallbackNodePolyfills` 今後実装する予定です。

各機能フラグとそのステータスの詳細については、Turbopack APIリファレンスを参照してください。

設定

Turbopackは、`turbopack` キー下の `next.config.js` (または `next.config.ts`) を介して設定できます。設定オプションには以下が含まれます。

• `rules` ファイル変換のための追加のwebpackローダーを定義します。
• `resolveAlias` 手動エイリアスを作成します (webpackの `resolve.alias` と同様)。
• `resolveExtensions` モジュール解決のためのファイル拡張子を変更または拡張します。
• `moduleIds` モジュールIDがどのように生成されるかを設定します (`'named'` vs `'deterministic'`)。
• `treeShaking` 開発ビルドおよび将来の本番ビルドでツリーシェイキングを有効または無効にします。
• `memoryLimit` Turbopackのメモリ制限 (バイト単位) を設定します。

module.exports = {
  turbopack: {
    // Example: adding an alias and custom file extension
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

詳細な設定例については、Turbopack設定ドキュメントを参照してください。

パフォーマンスデバッグ用のトレースファイルを生成する

パフォーマンスやメモリの問題に遭遇し、Next.jsチームがそれらを診断するのを手助けしたい場合は、開発コマンドに `NEXT_TURBOPACK_TRACING=1` を追加することでトレースファイルを生成できます。

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

これにより `.next/trace-turbopack` ファイルが生成されます。調査を支援するため、そのファイルをNext.jsリポジトリでGitHubイシューを作成する際に含めてください。

概要

Turbopackは、特に大規模なアプリケーションにおいて、ローカル開発とビルドを高速化するように設計された、Rustベースのインクリメンタルなバンドラーです。Next.jsに統合されており、CSS、React、TypeScriptのゼロコンフィグサポートを提供します。

Turbopackの改善と本番ビルドサポートの追加を続ける中で、今後のアップデートにご期待ください。それまでの間、`next dev --turbopack` で試していただき、フィードバックをお寄せください。

バージョン変更