Turbopack

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

なぜTurbopackなのか？

私たちは、Next.jsのパフォーマンスを向上させるためにTurbopackを開発しました。以下の点を含みます：

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

はじめに

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

package.json

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

現在、dev用のTurbopackは安定していますが、buildはアルファ版です。Turbopackが安定に近づくにつれて、プロダクションサポートに向けて積極的に取り組んでいます。

サポートされている機能

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

言語機能

機能	ステータス	備考
JavaScript & TypeScript	サポート済み	内部でSWCを使用しています。型チェックはTurbopackでは行われません（tsc --watchを実行するか、IDEに型チェックを依存してください）。
ECMAScript (ESNext)	サポート済み	Turbopackは最新のECMAScript機能をサポートしており、SWCのカバレッジに一致しています。
CommonJS	サポート済み	require()構文は標準で処理されます。
ESM	サポート済み	静的および動的なimportが完全にサポートされています。
Babel	部分的にサポートされていません	TurbopackにはデフォルトでBabelが含まれていません。ただし、Turbopackの設定を通じてbabel-loaderを設定することができます。

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

機能	ステータス	備考
JSX / TSX	サポート済み	SWCがJSX/TSXのコンパイルを処理します。
Fast Refresh	サポート済み	設定は不要です。
React Server Components (RSC)	サポート済み	Next.js App Router用です。Turbopackは正しいサーバー/クライアントのバンドリングを保証します。
root レイアウトの作成	サポートされていません	App Routerでのroot レイアウトの自動作成はサポートされていません。Turbopackは手動での作成を指示します。

CSSとスタイリング

機能	ステータス	備考
グローバルCSS	サポート済み	.cssファイルをアプリケーションに直接インポートします。
CSSモジュール	サポート済み	.module.cssファイルはネイティブに動作します（Lightning CSS）。
CSSネスティング	サポート済み	Lightning CSSは最新のCSSネスティングをサポートしています。
@import構文	サポート済み	複数のCSSファイルを組み合わせます。
PostCSS	サポート済み	postcss.config.jsをNode.jsワーカープールで自動的に処理します。Tailwind、Autoprefixerなどに便利です。
Sass / SCSS	サポート済み (Next.js)	Next.jsでは、Sassは標準でサポートされています。将来的には、Turbopackのスタンドアロン使用にはローダー設定が必要になる可能性があります。
Less	プラグインを通じて計画中	デフォルトではまだサポートされていません。カスタムローダーが安定したら、ローダー設定が必要になる可能性があります。
Lightning CSS	使用中	CSS変換を処理します。使用頻度の低いCSSモジュール機能（スタンドアロンの擬似クラスとしての:local/:globalなど）はまだサポートされていません。詳細は以下を参照してください。

アセット

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

モジュール解決

機能	ステータス	備考
パスエイリアス	サポート済み	tsconfig.jsonのpathsとbaseUrlを読み取り、Next.jsの動作に一致します。
手動エイリアス	サポート済み	next.config.jsでresolveAliasを設定します（webpack.resolve.aliasに類似）。
カスタム拡張子	サポート済み	next.config.jsでresolveExtensionsを設定します。
AMD	部分的にサポート済み	基本的な変換は動作しますが、高度なAMDの使用は制限されています。

パフォーマンスとFast Refresh

機能	ステータス	備考
Fast Refresh	サポート済み	JavaScript、TypeScript、CSSをフルリフレッシュなしで更新します。
インクリメンタルバンドリング	サポート済み	Turbopackは開発サーバーによって要求されたものだけを遅延的にビルドし、大規模なアプリを高速化します。

サポートされていない機能と計画されていない機能

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

• レガシーCSSモジュール機能
  • スタンドアロンの: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は、next.config.js（またはnext.config.ts）のturbopackキーの下で設定できます。設定オプションには以下が含まれます：

• rules ファイル変換のための追加のwebpackローダーを定義します。
• resolveAlias 手動エイリアスを作成します（webpackのresolve.aliasに類似）。
• resolveExtensions モジュール解決のためのファイル拡張子を変更または拡張します。
• moduleIds モジュールIDの生成方法を設定します（'named' vs 'deterministic'）。
• treeShaking 開発および将来のプロダクションビルドでのツリーシェイキングを有効または無効にします。
• memoryLimit Turbopackのメモリ制限（バイト単位）を設定します。

next.config.js

module.exports = {
  turbopack: {
    // 例：エイリアスとカスタムファイル拡張子の追加
    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を試して、フィードバックをお寄せください。

バージョン履歴

バージョン	変更内容
v15.3.0	buildの実験的サポート
v15.0.0	dev用のTurbopackが安定