Next.js 15.3

2025年4月9日（水）投稿者：Andrew Clark @ acdlite、Jiwon Choi @ devjiwonchoi、Jude Gao @ gao_jude、Maia Teegarden @ padmaia、Tim Neutkens @ timneutkens、Will Binns-Smith @ wbinnssmith

Next.js 15.3には、ビルド用Turbopack、新しいクライアントインストルメンテーションとナビゲーションフック、その他多くの機能が含まれています：

• ビルド用Turbopack（アルファ版）：8000以上のテスト（99%）をパスする高速なプロダクションビルド
• Rspackのコミュニティサポート（実験的）：Webpack互換性を持つ代替バンドラー
• クライアントインストルメンテーションフック：早期監視と分析セットアップ
• ナビゲーションフック：onNavigateとuseLinkStatusでルーティングを制御
• TypeScriptプラグインの改善：大規模コードベースのサポート向上

今すぐアップグレードするか、以下で開始してください：

# 自動アップグレードCLIを使用
npx @next/codemod@canary upgrade latest

# ...または手動でアップグレード
npm install next@latest react@latest react-dom@latest

# ...または新しいプロジェクトを開始
npx create-next-app@latest

Turbopackビルド（アルファ版）

next dev --turbopackの安定版リリース後、Next.js 15の開発セッションの50%以上がTurbopackを使用しています。このリリースにはnext build --turbopackのアルファ版が含まれ、ローカル開発と同じパフォーマンス向上をプロダクションビルドにもたらします。

15.3にアップグレードして以下を実行することで、プロダクションビルド用Turbopackを試すことができます：

next build --turbopack

機能性

next buildの統合テストの99.3%がすでにパスしています。100%への進捗はareweturboyet.comで追跡できます。

アプリケーションが開発用Turbopackで動作する場合、ビルドでもそのまま動作するはずです。

Turbopackビルドはアルファ版です。現段階では、ミッションクリティカルなアプリケーションでのプロダクション使用は推奨しません。代わりに、プレビューやステージング環境で試すか、ローカルでビルドを実行してバンドルサイズとパフォーマンスの違いを観察してください。

スコープホイスティング、改善されたチャンキング、その他の最適化を通じて、これらのパフォーマンスギャップを埋めるために積極的に取り組んでいます。

ビルドパフォーマンス

Vercelの大規模な内部モノレポと初期パートナーのコードベースでTurbopackを検証してきました。以前のWebpack実装と比較したTurbopackアーキテクチャの利点の一つは、CPUコアを追加するとパフォーマンスがスケールすることです：

• 4コア：Webpackより28%高速
• 16コア：Webpackより60%高速
• 30コア：Webpackより83%高速

これらのビルド時間は、永続キャッシュに関する実験的な作業により、さらに短縮されます。これについては今後のリリースで詳しく共有します。

エコシステム

安定版リリース前に、Sentryなどの一般的に使用される統合がnext build --turbopackと互換性があることを確認するために取り組んでいます。互換性を確保するために協力したいツール作成者の方は、X（Twitter）で@leerobまでご連絡ください。

フィードバック

安定版リリースの準備を支援するため、順調に進んだ場合でもフィードバックを共有してください：

• 一般的なフィードバックはGitHubディスカッション
• 再現可能な問題はGitHubイシュー

next.config.tsでのTurbopack設定（安定版）

next.config.tsでのTurbopack設定は、experimental.turboからトップレベルのturbopackキーに移動しました：

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

互換性のため、experimental.turboオプションはNext.jsの次のメジャーリリースまで引き続きサポートされます。

Turbopack設定オプションの完全なリストについては、Turbopack APIリファレンスをご覧ください。

Rspackのコミュニティサポート（実験的）

RspackチームがNext.js用のコミュニティプラグインを作成しました。これにより、WebpackのAPIとほぼ完全な互換性が必要だが、まだTurbopackに移行できないNext.jsユーザーが、ローカルコンパイルとビルド時間を改善するオプションを提供します。

Turbopackでの進歩に自信を持っており、Webpackユーザーに段階的な移行パスを提供し続けます。

これは公式のNext.jsプラグインではありませんが、Rspackチームと提携しています。両チームはSWCやLightning CSSなどの共有基盤で協力し、すべてのNext.jsユーザーとより広いエコシステムに利益をもたらします。

Next.jsでRspackを使用したい場合は、next-rspackアダプターを使用できます。統合テストスイートに対してアダプターを実行しており、現在約96%のテストがパスしています。

例を表示するか、Rspackドキュメントで詳細を学んでください。

クライアントインストルメンテーションフック

instrumentation-client.js|tsファイルを使用すると、アプリケーションのフロントエンドコードが実行を開始する前に実行される監視と分析コードを追加できます。これは、ライフサイクルの可能な限り早い段階でパフォーマンス追跡、エラー監視、その他のクライアントサイド観測ツールを設定するのに理想的です。

// パフォーマンス監視の設定
performance.mark('app-init');

// 分析の初期化
console.log('Analytics initialized');

// エラー追跡の設定
window.addEventListener('error', (event) => {
  // エラー追跡サービスに送信
  reportError(event.error);
});

このファイルは、サーバーサイドインストルメンテーションと同様に、プロジェクトのルートに配置してください。

詳細はinstrumentation-clientファイルドキュメントをご覧ください。

ナビゲーションフック

Next.js 15.3では、クライアントサイドルーティング機能を強化する新しいナビゲーションフックを導入し、ローカライズされたローディング状態をより簡単に開発し、ナビゲーションキャンセレーションなどの複雑な制御を実装できるようにします。

onNavigate

このイベントハンドラーはLinkコンポーネントの新しいプロパティで、クライアントサイドナビゲーション中に実行され、アプリケーションのルーティング動作を正確に制御できます。

すべてのクリックで発火するonClickイベントとは異なり、onNavigateはSingle-Page App（SPA）ナビゲーションに使用でき、コードを実行したり、preventDefault()でナビゲーションをキャンセルしたりできます。

このAPIは、実際のページ遷移中にのみ実行されるトランジションアニメーション、ナビゲーションガード、分析追跡の実装に使用できます。

詳細はonNavigateドキュメントをご覧ください。

useLinkStatus

useLinkStatusクライアントコンポーネントフックは、ナビゲーションが進行中であることを示すpending booleanを返し、ローディング状態のローカライズされた制御を提供します。

このAPIはReactのuseFormStatusをモデルにしており、特にプリフェッチが無効になっている場合や、リンクされたルートに専用のローディング状態がない場合に、ページ遷移中にカスタムローディングインジケーターを追加するのに役立ちます。

useLinkStatusを使用するコンポーネントを<Link>コンポーネントの子孫として配置することで、リアルタイムでナビゲーションイベントに反応するレスポンシブなUI要素を作成できます。

詳細はuseLinkStatusドキュメントをご覧ください。

TypeScriptプラグインのパフォーマンス改善

Next.js TypeScript言語サーバープラグイン（LSP）が高速になりました。LSPは、サーバー/クライアント境界検証、コンポーネントプロップヒント、設定自動補完、React Server Componentsでの許可されていないAPIのエラー検出などのインラインIntellisense機能を提供します。

非常に大規模なコードベースでは、プラグインが以前TypeScript言語サービスをハングまたはクラッシュさせる可能性がありました。これらの問題を解決するために大幅なパフォーマンス改善を行いました。

内部テストでは、プラグインの応答時間が約60%改善され、フリーズやクラッシュはありません。

その他の変更

• [機能] images.remotePatternsで新しいURL()をサポート（#77692）
• [機能] Viewportオプションがmetadataから分離（#77427）
• [機能] unstable_dynamicOnHoverオプションを追加（#77866）
• [機能] Pinterest Rich Pinsのサポートを追加（#76988）
• [改善] Route Handlersでリダイレクト後にrevalidateが動作するように（#77090）
• [改善] Server Actionsでrevalidate呼び出し後の強い一貫性を確保（#76885）
• [改善] より高速なPNGからAVIF変換のためにsharpをアップグレード（#77839）

貢献者

Next.jsは3,000人以上の個人開発者の共同作業の結果です。このリリースは以下の方々によってもたらされました：

Next.jsチーム：Andrew、Hendrik、Janka、Jiachi、Jimmy、Jiwon、JJ、Josh、Jude、Sam、Sebastian、Sebbie、Wyatt、Zack

Turbopackチーム：Benjamin、Donny、Josh、Maia、Niklas、Tim、Tobias、Will

Next.js Docsチーム：Delba、Rich、Ismael、Lee

@raunofreiberg、@huozhi、@ijjk、@timneutkens、@gaojude、@leerob、@mezotv、@bgw、@samcx、@ztanner、@sokra、@mischnic、@wbinnssmith、@kdy1、@unstubbable、@ahabhgk、@ScriptedAlchemy、@SukkaW、@wyattjoh、@eps1lon、@Amirroid、@Netail、@lubieowoce、@gnoff、@jackwilson323、@acdlite、@sbougerel、@kevva、@kasperpeulen、@Cy-Tek、@dvoytenko、@husseinraoouf、@isBatak、@iamkd、@delbaoliveira、@jantimon、@padmaia、@Bernardoow、@styfle、@devjiwonchoi、@JamBalaya56562、@Marukome0743の皆様、ご協力ありがとうございました！