Turbopack

Turbopackは、Rustで記述されNext.jsに組み込まれた、JavaScriptとTypeScript向けに最適化された増分バンドラーです。PagesルーターとAppルーターの両方でTurbopackを使用することで、はるかに高速なローカル開発体験を得ることができます。

なぜTurbopackなのか？

私たちはNext.jsのパフォーマンスを向上させるためにTurbopackを構築しました：

統一グラフ： Next.jsは複数の出力環境（クライアントとサーバーなど）をサポートしています。複数のコンパイラを管理し、バンドルを連結するのは面倒です。Turbopackはすべての環境に対して単一の統一グラフを使用します。
バンドリングとネイティブ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はSWCのカバレッジに合わせて最新のECMAScript機能をサポートしています。
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ルーター用。Turbopackはサーバー/クライアントバンドリングを正確に行います。
ルートレイアウトの作成	未サポート	Appルーターでのルートレイアウトの自動作成はサポートされていません。Turbopackは手動で作成するよう指示します。

CSSとスタイリング

機能	状態	備考
グローバルCSS	サポート済	アプリケーションに`.css`ファイルを直接インポートできます。
CSS Modules	サポート済	`.module.css`ファイルはネイティブに動作します（Lightning CSS）。
CSSネスティング	サポート済	Lightning CSSはモダンCSSネスティングをサポートしています。
@import構文	サポート済	複数のCSSファイルを組み合わせることができます。
PostCSS	サポート済	Node.jsワーカープールで`postcss.config.js`を自動的に処理します。Tailwind、Autoprefixerなどに便利です。
Sass / SCSS	サポート済（Next.js）	Next.jsでは、Sassは標準でサポートされています。将来的に、スタンドアロンのTurbopack使用ではローダー設定が必要になる可能性があります。
Less	プラグインで予定	デフォルトではまだサポートされていません。カスタムローダーが安定したら、ローダー設定が必要になる可能性があります。
Lightning CSS	使用中	CSS変換を処理します。一部の使用頻度の低いCSS Modules機能（単独の疑似クラスとしての`: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 Modules機能
- 単独の:localおよび:global疑似クラス（関数バリアント:global(...)のみがサポートされています）。
- @valueルール（CSS変数に置き換えられました）。
- :importおよび:export ICSSルール。
next.config.jsでのwebpack()設定 TurbopackはWebpackに取って代わるため、webpack()設定は認識されません。代わりにturbopack設定を使用してください。
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'または'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 issueを作成する際にそのファイルを含めると、調査に役立ちます。

まとめ

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

Turbopackの改善とプロダクションビルドサポートの追加を続けていく過程で、さらなる更新をお楽しみに。その間、next dev --turbopackを試して、フィードバックをお寄せください。

バージョン変更

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