Next.js 15.3の新機能解説：TurbopackとRspackでビルド環境はどう変わる？
2025.04.10こんにちは、豊島です。
Next.jsの最新バージョン15.3がリリースされました。このバージョンでは、ビルドパフォーマンスと開発者体験の向上に焦点を当てた重要なアップデートが多数含まれています。
特に注目すべきは、Turbopackのビルド機能のアルファ版リリース、Client Instrumentation hook、ナビゲーションフックの導入、そしてTypeScriptプラグインの改善でしょうか。
このブログでは、公式から発表されたTurbopackのアップデートとRspackについて解説します。
Turbopackのアップデートについて
Turbopackとは
Turbopackは、Rustで書かれた高速なJavaScriptビルドツールで、Webpackの後継として開発されています。
Next.js 15のリリース以降、開発環境（next dev）でのTurbopackの安定版が提供されてきました。
公式発表によると、現在ではNext.js 15の開発セッションの50%以上がTurbopackを使用しているとのことで、開発者コミュニティからの高い支持を示しています。
今回のNext.js 15.3では、この成功を本番ビルドにも拡張し、next build --turbopackコマンドでTurbopackを使用したビルド機能がアルファ版として提供されるようになりました。これにより、開発環境だけでなく本番ビルドでもTurbopackのパフォーマンス向上の恩恵を受けることができます。
Turbopackのビルド機能は現在アルファ版ですが、すでに高い完成度を誇っています。公式によると、next buildの統合テストの99.3%が合格しており、ほぼすべての機能が正常に動作することが確認されています。
進捗状況はareweturboyet.comで確認できます。
重要なポイントとして、開発環境でTurbopackが問題なく動作しているプロジェクトであれば、ビルド時にも同様に動作する可能性が高いとされています。
ただし、現段階ではミッションクリティカルなアプリケーションの本番環境での使用は推奨されていません。
代わりに、プレビュー環境やステージング環境、あるいはローカルでのビルドテストに使用することが推奨されています。
パフォーマンスの向上
Turbopackの最大の魅力はそのパフォーマンスです。Vercelの大規模な内部モノレポや初期パートナーのコードベースでの検証によると、CPUコア数に応じて以下のようなパフォーマンス向上が確認されています：
- 4コアの場合：Webpackより28%高速
- 16コアの場合：Webpackより60%高速
- 30コアの場合：Webpackより83%高速
これはTurbopackのアーキテクチャが、CPUコアを追加するほどスケールするように設計されているためです。
さらに、将来のリリースでは永続キャッシングの実験的な機能が追加される予定で、ビルド時間がさらに短縮されることが期待されています。
使用方法
Next.js 15.3にアップグレードした後、以下のコマンドを実行するだけでTurbopackを使ったビルドを試すことができます：
next build --turbopack
エコシステムとフィードバック
Turbopackチームは、Sentryなど広く使用されている統合機能との互換性を確保するために取り組んでいるようです。
互換性確保のために協力したい方は@leerobに連絡してみてください。
また、Turbopackの安定版リリースに向けて、以下の方法でフィードバックを提供することが推奨されています：
- 一般的なフィードバックはGitHub discussions
- 再現可能な問題はGitHub issues
Turbopackのビルド機能は、Next.jsの開発体験をさらに向上させる重要な一歩であり、特に大規模プロジェクトでの開発効率を大幅に改善する可能性を秘めていると感じました。
Turbopack設定の安定化 - 設定方法の改善
Next.js 15.3では、next.config.tsでのTurbopack設定がexperimental.turboから最上位のturbopackキーに移動しました。これにより、設定がより直感的になり、安定性が向上しています。
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
turbo: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
};
export default nextConfig;
互換性のために、experimental.turboオプションはNext.jsの次のメジャーリリースまでサポートされ続けます。
Turbopackの設定オプションの完全なリストは、Turbopack API Referenceで確認できます。
Rspackのコミュニティサポートについて（experimental）
Next.js 15.3では、Rspackチームが開発したNext.jsのコミュニティプラグインがサポートされるようになりました。
これは、Next.jsエコシステムにおける新たな選択肢として注目されています。
Rspackとは
Rspackは、Rustで書かれたJavaScriptバンドラーで、Webpackとの高い互換性を維持しつつ、パフォーマンスを大幅に向上させることを目指しています。Turbopackと同様にRustの高速な処理能力を活かしていますが、Turbopackとは異なりWebpack APIとの互換性に重点を置いています。
Next.jsユーザーにとってのメリット
このコミュニティプラグインは、以下のようなユーザーに特に有益です：
- Webpackの正確なAPI互換性が必要なプロジェクト
- まだTurbopackに移行できないが、ビルド時間の短縮を求めているプロジェクト
- ローカルでのコンパイル時間とビルド時間の改善を求めているプロジェクト
Vercelチームは、Turbopackの開発を継続的に進めていますが、Webpackユーザーに対して段階的な移行パスを提供することも重視しています。
Rspackのサポートは、その移行過程における選択肢の一つとして位置づけられています。
共同開発の取り組み
このプラグインは公式のNext.jsプラグインではありませんが、VercelチームはRspackチームと協力関係を築いています。両チームは、SWCやLightning CSSなどの共通基盤技術の開発に協力しており、これはすべてのNext.jsユーザーと広範なエコシステムに恩恵をもたらします。
使用方法と現状
Rspackを試してみたい場合は、next-rspackアダプターを使用できます。Vercelチームは、このアダプターを統合テストスイートで実行しており、現在約96%のテストに合格しています。
詳細な使用方法や設定については、Rspackのドキュメントを参照することができます。
Turbopackとの関係
RspackとTurbopackは、どちらもRustで書かれた高速なJavaScriptビルドツールですが、異なるアプローチを取っています：
- Turbopack: Next.jsチームが開発する次世代バンドラー。Webpackとの完全な互換性よりも、パフォーマンスと新しいアーキテクチャに重点を置いています。
- Rspack: Webpackとの高い互換性を維持しつつ、パフォーマンスを向上させることを目指しています。
どちらを選ぶかは、プロジェクトの要件や既存のWebpack設定の複雑さによって異なります。
Turbopackは長期的な方向性として推奨されていますが、Rspackは特にWebpack互換性が重要なプロジェクトにとって有用な選択肢となると考えています。
最後に
なお、本記事ではTurbopackとRspackを中心にご紹介しましたが、Next.js 15.3ではこのほかにも、Client Instrumentation Hookやナビゲーションフックの導入、TypeScriptプラグインの改善など、開発者体験をさらに高めるアップデートが含まれています。
詳しくは公式ブログをご覧ください。
この記事がどなたかの参考になれば幸いです。
