Turbopack: What's New in Next.js 16.2

水曜日, 2026年3月18日

投稿者: Andrew Imm @ setimmediate、Tim Neutkens @ timneutkens

Turbopack が Next.js のデフォルトバンドラになってから2回のリリースを経て、パフォーマンス改善、バグ修正、および機能の整合性向上に注力しています。Next.js 16.2 に含まれる主な新機能は以下のとおりです。

• Server Fast Refresh：細粒度のサーバー側ホットリロード
• Web Worker Origin：Workers 内での WASM ライブラリのサポート拡大
• Subresource Integrity サポート：JavaScript ファイル向けの SRI
• 動的 import のツリーシェイキング：未使用エクスポートの除去
• インラインローダー設定：import 属性によるインポート毎のローダー設定
• Lightning CSS 設定：実験的な LightningCSS オプション
• ログフィルタリング：ignoreIssue による冗長なログ/警告の抑制
• postcss.config.ts サポート：TypeScript 版 PostCSS 設定の対応
• パフォーマンス改善とバグ修正：200以上の変更と修正

次のリリースでは、コンパイラの速度向上とメモリ使用量削減にさらに注力する予定です。

サーバー Fast Refresh

開発時のサーバー側コードのリロード方法を見直しました。従来は変更されたモジュールとそのインポートチェーン上のすべてのモジュールについて require.cache をクリアしており、未変更の node_modules などを含めて不要に多くのコードをリロードしてしまうことがありました。

新しい仕組みでは、ブラウザで使われる Fast Refresh と同じアプローチをサーバー側に導入しています。Turbopack のモジュールグラフに関する知識を活用することで、実際に変更されたモジュールのみをリロードし、その他はそのまま維持します。これによりサーバー側ホットリロードが大幅に効率化されます。

実際の Next.js アプリケーションでは、アプリケーションのリフレッシュが 67%〜100% 高速化し、Next.js 内部でのコンパイル時間が 400%〜900% 高速化するケースを確認しています。これらの結果は最小の "hello world" スタータープロジェクトから vercel.com のような大規模サイトまでスケールします。

サンプル Next.js サイトでのサーバーリフレッシュ時間の改善例（概算）:

• Next.js: 40ms → 2.7ms（375% 速くなりました）
• Application: 19ms → 9.7ms

本日より、この機能はデフォルトで全ての開発者に対して有効になります。Proxy および Route Handlers は現時点では既存のシステムを使用しており、それらへのサポートは今後のリリースで追加されます。新機能についてのフィードバックや問題報告は GitHub でお寄せください。

Web Worker Origin

これまで Web Worker は blob:// URL を通してブートストラップされており、迅速にワーカーをロードできる反面、location.origin が空になっていました。そのため、importScripts() や fetch() を使うコード（主にサードパーティライブラリ）が相対 URL を解決できない問題がありました。

更新された Worker のブートストラップコードでは、origin が正しくドメイン名を指すようになり、相対フェッチが成功するようになりました。これにより、以前のバージョンで Worker 内で WASM を動かす際に問題が生じていたケースの多くが解決されます。

Subresource Integrity（SRI）サポート

Turbopack は Subresource Integrity (SRI) をサポートするようになりました。SRI はビルド時に JavaScript ファイルの暗号ハッシュを生成し、ブラウザがファイルが改変されていないか検証できる仕組みです。

ブラウザは Content Security Policy を提供しており、実行できる JavaScript を制限することで多くのセキュリティ問題を防げます。しかし、nonce ベースの実装はページをすべて動的レンダリングする必要があり、パフォーマンスに影響します。SRI はあらかじめ各スクリプトのハッシュを計算し、承認されたハッシュのみ実行を許可する代替手段です。

次のように next.config.js で有効化できます:

const nextConfig = {
  experimental: {
    sri: {
      algorithm: 'sha256',
    },
  },
};
module.exports = nextConfig;

動的 import のツリーシェイキング

Turbopack は、分割した動的 import に対しても静的 import と同様にツリーシェイキングを行うようになりました。未使用のエクスポートはバンドルから除去されます。

const { cat } = await import('./lib');

このような構文はツリーシェイキングの観点では静的インポートと同等になり、./lib から未使用のエクスポートは取り除かれます。

インラインローダー設定（import attributes）

インポート属性を使ったインポート毎のローダー設定をサポートしました。従来は turbopack.rules を通じてローダーをグローバルに適用していましたが、特定のインポートだけに特殊処理が必要な場合は import 属性で個別に指定できます。

例:

import rawText from './data.txt' with {
  turbopackLoader: 'raw-loader',
  turbopackAs: '*.js',
};

import value from './data.js' with {
  turbopackLoader: 'string-replace-loader',
  turbopackLoaderOptions: '{"search":"PLACEHOLDER","replace":"replaced value"}',
};

この機能は、同じファイルタイプの他のインポートに副作用を与えたくない場合に便利です。使用可能な属性は turbopackLoader、turbopackLoaderOptions、turbopackAs、turbopackModuleType です。ただし、インラインローダーを使ったコードは移植性が低くなるため、可能であれば next.config.ts でローダーを設定することを推奨します。インライン設定はプラグインやローダーで生成されるコードに便利なオプションです。

Lightning CSS の設定

Lightning CSS は Turbopack が CSS の最小化やベンダープリフィックスに使う高速な Rust 製トランスフォーマです。Babel や SWC が JavaScript に対して行うように、古いブラウザ向けにモダンな CSS 機能を実装することも可能です。

これまでこれらの設定を切り替える唯一の方法は Browserslist の設定を変更することでしたが、実験的な lightningCssFeatures オプションにより、特定の機能を常にトランスパイルするか、または決してトランスパイルしないかを強制できます。

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
    lightningCssFeatures: {
      include: ['light-dark', 'oklab-colors'],
      exclude: ['nesting'],
    },
  },
};
export default nextConfig;

ログフィルタリング

turbopack.ignoreIssue 設定オプションにより、ストリーミングログ内の冗長な警告や想定内の警告を抑制できるようになりました。これはサードパーティのコード、生成ファイル、オプショナルな依存関係からの警告を抑えたり、Next.js のエラーオーバーレイに表示される想定内のエラーを隠す際に便利です。

特定のコードパスで生成されるログにマッチさせたり、タイトル／説明の文字列やパターンでフィルタすることができます。

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  turbopack: {
    ignoreIssue: [
      { path: '**/vendor/**' },
      { path: 'app/**', title: 'Module not found' },
      { path: /generated/.*\.ts/, description: /expected error/i },
    ],
  },
};
export default nextConfig;

postcss.config.ts のサポート

Turbopack は従来の .js/.cjs バリアントに加えて postcss.config.ts をサポートするようになりました。

パフォーマンス改善とバグ修正

Turbopack の内部に継続的な投資を行い、200 以上の変更とバグ修正を実施しました。データエンコーディング、内部表現フォーマット、ハッシュアルゴリズムの最適化によりメモリ使用量とビルド時間が改善されています。エラーログの明確化や診断情報の拡充により、コンパイラエラーの理解がしやすくなりました。

また、GitHub Issues で寄せられたフィードバックをもとに、16.1 リリース以降に欠けていた機能や改善点に取り組みました。

フィードバックとコミュニティ

フィードバックを共有して Next.js の将来を一緒に作っていきましょう:

• GitHub Discussions
• GitHub Issues
• Discord Community