Backブログに戻る

Next.js 15.3

Next.js 15.3 には、ビルド用のTurbopack、新しいクライアントインストルメンテーションとナビゲーションフックなどが含まれています。

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

今すぐアップグレードするか、以下で新規プロジェクトを開始：

Terminal
# 自動アップグレード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を試してください：

Terminal
next build --turbopack

機能性

next build の統合テストの99.3%が既に通過しています。100%への進捗はareweturboyet.comで追跡可能です。dev でTurbopackが動作するアプリケーションは、build でもそのまま動作するはずです。

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

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

ビルドパフォーマンス

TurbopackをVercelの大規模な内部モノレポと早期パートナーコードベースで検証しています。Turbopackのアーキテクチャが従来のWebpack実装に対して持つ利点の1つは、CPUコアを追加するとパフォーマンスがスケールすることです：

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

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

エコシステム

Sentryなどの一般的に使用される統合と協力し、安定版リリース前にnext build --turbopackとの互換性を確保しています。互換性を確保したいツール作者の方は、@leerob on Xまでご連絡ください。

フィードバック

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

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

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

next.config.ts
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ファイルを使用すると、アプリケーションのフロントエンドコードが実行される前にモニタリングと分析コードを追加できます。

これは、パフォーマンス追跡、エラーモニタリング、またはその他のクライアントサイドの観測ツールをライフサイクルのできるだけ早い段階で設定するのに理想的です。

instrumentation-client.js
// パフォーマンスモニタリングを設定
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はシングルページアプリケーション（SPA）ナビゲーションに使用でき、コードを実行したりpreventDefault()でナビゲーションをキャンセルしたりできます。

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

詳細はonNavigateドキュメントを参照してください。

useLinkStatus

useLinkStatusクライアントコンポーネントフックは、ナビゲーションが進行中かどうかを示すpendingブール値を返し、ローディング状態をローカライズして制御できます。

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

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

詳細はuseLinkStatusドキュメントを参照してください。

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

Next.js TypeScript言語サーバープラグイン（LSP）が高速化しました。

LSPは、サーバー/クライアント境界検証、コンポーネントプロップのヒント、設定のオートコンプリート、Reactサーバーコンポーネントでの禁止APIのエラー検出などのインラインIntellisense機能を提供します。非常に大規模なコードベースでは、以前はプラグインがTypeScript言語サービスをハングまたはクラッシュさせる可能性がありました。

これらの問題を解決するために大幅なパフォーマンス改善を行いました。内部テストでは、プラグインの応答時間が約60%改善され、フリーズやクラッシュは発生しません。

その他の変更

  • [機能] images.remotePatternsでnew URL()をサポート（#77692）
  • [機能] ビューポートオプションが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人以上の開発者の共同作業の結果です。このリリースは以下の方々によってもたらされました：

@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の皆さん、ご協力ありがとうございました！