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を有効にするには、開発サーバーを実行する際に--turbopackフラグを使用します：

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

現在、Turbopackはnext devのみをサポートしています。ビルド（next 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	サポート済み	Node.jsワーカープールで`postcss.config.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は開発サーバーによって要求されたものだけを遅延的にビルドし、大規模なアプリを高速化します。

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

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

プロダクションビルド (next build) Turbopackは現在next devのみをサポートしています。プロダクションビルドのサポートは積極的に開発中です。
レガシー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）のexperimental.turboキーの下で構成できます。設定オプションには以下が含まれます：

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

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

なぜTurbopackなのか？​

はじめに​

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

言語機能​

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

CSSとスタイリング​

アセット​

モジュール解決​

パフォーマンスとFast Refresh​

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

設定​

パフォーマンスデバッグのためのトレースファイルの生成​

まとめ​