Next.js 15.3 | Next.js

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

ビルド用Turbopack（アルファ版）: 8000以上のテスト（99%）に合格し、より高速なプロダクションビルドを実現
Rspackのコミュニティサポート（実験的）: Webpack互換性のある代替バンドラー
クライアント計測フック: 早期の監視および分析設定
ナビゲーションフック: onNavigateおよびuseLinkStatusでルーティングを制御
TypeScriptプラグインの改善: 大規模なコードベースのサポートを改善

今すぐアップグレードするか、以下から始めましょう

ターミナル

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
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で確認できます。アプリケーションがすでにdev用にTurbopackで動作している場合、buildでもそのまま動作するはずです。

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

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

ビルドパフォーマンス

Vercelの大規模な内部モノレポおよび初期パートナーのコードベースでTurbopackの検証を行っています。Turbopackのアーキテクチャが以前のWebpack実装と比較して持つ利点の1つは、CPUコアを追加するとパフォーマンスが向上することです。

4コアの場合: Webpackより28%高速
16コアの場合: Webpackより60%高速
30コアの場合: Webpackより83%高速

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

エコシステム

安定版リリース前に、Sentryなどの一般的な統合機能がnext build --turbopackと互換性があることを確認するために協力しています。互換性を確保するために弊社との連携をご希望のツール開発者様は、Xで@leerobまでご連絡ください。

フィードバック

安定版リリースの準備のため、問題なく動作した場合でもぜひフィードバックをお寄せください

一般的なフィードバックはGitHub discussionsへ
再現の場合はGitHub issuesへ

`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

// Set up performance monitoring
performance.mark('app-init');
 
// Initialize analytics
console.log('Analytics initialized');
 
// Set up error tracking
window.addEventListener('error', (event) => {
  // Send to your error tracking service
  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 Server Componentsで許可されていないAPIのエラー検出など、インラインのIntellisense機能を提供します。非常に大規模なコードベースでは、以前はプラグインがTypeScript言語サービスをハングアップさせたりクラッシュさせたりする可能性がありました。

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

その他の変更

[機能] images.remotePatternsでnew URL()をサポート（#77692）
[機能] ビューポートオプションがmetadataから分離されました（#77427）
[機能] unstable_dynamicOnHoverオプションを追加（#77866）
[機能] Pinterestリッチピンのサポートを追加（#76988）
[改善] ルートハンドラーでリダイレクトが続いた場合に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、and Zack。
Turbopackチーム：Benjamin、Donny、Josh、Maia、Niklas、Tim、Tobias、and Will。
Next.js Docsチーム：Delba、Rich、Ismael、and 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の皆様、ご協力ありがとうございました！