Turbopack: Next.js 16.2の新機能

投稿者: Andrew Imm @ setimmediate、Tim Neutkens @ timneutkens
投稿日: 2026年3月18日（水）

TurbopackがNext.jsのデフォルトバンドラーになってから2回のリリースを経て、私たちはパフォーマンスの向上、バグ修正、機能の同等性向上に注力しています。Next.js 16.2の一部として提供される最新機能をご紹介します。

• Server Fast Refresh: きめ細かいサーバーサイドホットリロード
• Web Worker Origin: WorkerでのWASMライブラリサポートの向上
• Subresource Integrity Support: JavaScriptファイルのSubresource Integrity
• Tree Shaking of Dynamic Imports: 動的import()から未使用のexportを削除
• Inline Loader Configuration: import属性による個別importのローダー設定
• Lightning CSS Configuration: 実験的なLightningCSS設定オプション
• Log Filtering: ignoreIssueによるノイズの多いログと警告の抑制
• postcss.config.ts Support: TypeScript PostCSS設定
• Performance Improvements and Bug Fixes: 200以上の変更とバグ修正

次回リリースに向けて、コンパイラーのパフォーマンス向上とメモリ使用量の削減に注力していきます。

Server Fast Refresh

開発中のサーバーサイドコードのリロード方法を再設計しました。従来のシステムでは、変更されたモジュールとそのインポートチェーン内のすべてのモジュールのrequire.cacheをクリアしていました。このアプローチでは、変更されていないnode_modulesを含め、必要以上に多くのコードをリロードすることがよくありました。

新しいシステムでは、ブラウザで使用されているのと同じFast Refreshアプローチをサーバーコードに適用します。Turbopackのモジュールグラフの知識により、実際に変更されたモジュールのみがリロードされ、残りはそのまま保持されます。これにより、サーバーサイドのホットリロードが大幅に効率化されます。

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

サンプルNext.jsサイトでのサーバーリフレッシュ時間（375%高速化）

	Before	After
Next.js	40ms	2.7ms
Application	19ms	9.7ms
Total	59ms	12.4ms

本日、この機能をすべての開発者にデフォルトで有効にします。ProxyとRoute Handlersは現在既存のシステムを使用しますが、これらのサポートは将来のリリースで提供予定です。

この新機能に関するフィードバックや問題はGitHubでお知らせください。

Web Worker Origin

以前は、Web Workerはblob:// URLを通じてブートストラップされていました。これによりワーカーの読み込みは効率化されましたが、location.origin値が空になっていました。importScripts()やfetch()を使用しようとするWeb Workerコード（通常はサードパーティライブラリ）は、変更なしではリクエストを解決できませんでした。

更新されたWorkerブートストラップコードにより、originが正しくドメイン名を指すようになり、相対fetchが成功するようになりました。これにより、以前のバージョンでWorker内でWASMコードの実行に問題があった方の問題が解決されるはずです。

Subresource Integrity Support

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

ブラウザは、サイトが実行可能なJavaScriptを制限し、セキュリティ問題のクラス全体を排除できるContent Security Policyという技術を提供しています。しかし、これを実装するための典型的なnonceベースの方法では、すべてのページを動的にレンダリングする必要があり、パフォーマンスに影響します。

Subresource Integrityは、各スクリプトのハッシュを事前に計算し、承認されたハッシュを持つスクリプトのみをブラウザが実行できるようにする代替手段です。

// next.config.js
const nextConfig = {
  experimental: {
    sri: {
      algorithm: 'sha256',
    },
  },
};

module.exports = nextConfig;

Tree Shaking of Dynamic Imports

Turbopackは、静的インポートと同様に、分割代入された動的インポートのtree shakingを行うようになりました。未使用のexportはバンドルから削除されます：

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

これは、tree shakingの目的において静的インポートと同等になりました。./libから使用されていないexportはtree-shakenされます。

Inline Loader Configuration

Turbopackは、import属性を介した個別インポートのローダー設定をサポートするようになりました。turbopack.rulesを通じてローダーをグローバルに適用する代わりに、with句を使用して個別のインポートで設定できます：

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 Configuration

Lightning CSSは、CSS最小化とプレフィックス付けのためにTurbopackが使用する高速なRustベースのCSSトランスフォーマーです。また、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;

Log Filtering

Turbopackは、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 Support

Turbopackは、既存の.jsと.cjs形式に加えて、postcss.config.tsをサポートするようになりました。

Performance Improvements and Bug Fixes

Turbopack内部の改善への投資を続けています。200以上の変更とバグ修正により、幅広いプロジェクトでの安定性と互換性が向上しました。

データエンコーディング、内部表現形式、ハッシュアルゴリズムの最適化により、メモリ使用量とビルド時間が改善されました。エラーログをより明確にし、診断を拡張してコンパイラーエラーをより理解しやすくしました。

また、16.1リリース以降に不足していた機能を把握するためのガイドとして、皆様のGitHub Issuesを活用しました。

Feedback and Community

フィードバックを共有し、Next.jsの未来を形作るお手伝いをしてください：

• GitHub Discussions
• GitHub Issues
• Discord Community