コンテンツにスキップ
ブログに戻る

2025年4月9日水曜日

Next.js 15.3

投稿者
Andrew Clark
Andrew Clark@acdlite
Jiwon Choi
Jiwon Choi@devjiwonchoi
Jude Gao
Jude Gao@gao_jude
Maia Teegarden
Maia Teegarden@padmaia
Tim Neutkens
Tim Neutkens@timneutkens
Will Binns-Smith
Will Binns-Smith@wbinnssmith

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

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

ターミナル
# 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 Builds (alpha)

next dev --turbopack の安定リリースに続き、Next.js 15 の開発セッションの 50% 以上で Turbopack が使用されるようになりました。

このリリースには、`next build --turbopack` のアルファ版が含まれており、ローカル開発から本番ビルドまで同じパフォーマンス改善をもたらします。

本番ビルドで Turbopack を試すには、15.3 にアップグレードして以下を実行してください。

ターミナル
next build --turbopack

機能

99.3% の `next build` の統合テストがすでにパスしています。100% に向かう進捗は areweturboyet.com で追跡できます。アプリケーションが既に Turbopack for `dev` で動作している場合、`build` でもそのまま動作するはずです。

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

スコープホーイスティング、チャンク処理の改善、その他の最適化を通じて、これらのパフォーマンスギャップを積極的に埋めていきます。

ビルドパフォーマンス

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

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

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

エコシステム

Sentry のような一般的に使用されるインテグレーションと連携し、安定リリース前に `next build --turbopack` との互換性を確保しています。互換性を確保するために協力したいツール開発者の方は、X の @leerob までご連絡ください。

フィードバック

安定リリースに役立てるため、たとえスムーズに進んだとしても、フィードバックを共有してください。

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 用のコミュニティプラグインを作成しました。

これにより、Turbopack にまだ移行できないが、ローカルコンパイルとビルド時間を改善したい Next.js ユーザーのために、ほぼ正確な Webpack API 互換性を提供するオプションが提供されます。Turbopack の進捗には自信を持っており、Webpack ユーザーへの段階的な移行パスを提供し続けます。

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

Next.js で Rspack を使用することを検討したい場合は、`next-rspack` アダプターを使用できます。このアダプターを統合テストスイートで実行しています。現在、テストの約 96% をパスしています。

例を見る (View an example) か、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 ファイルのドキュメントで詳細をご覧ください (instrumentation-client file documentation)。

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

onNavigate

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

`onClick` イベントはすべてのクリックで発生しますが、`onNavigate` は シングルページアプリケーション (SPA) ナビゲーションに使用でき、コードを実行したり、`preventDefault()` を使用してナビゲーションをキャンセルしたりできます。

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

onNavigate ドキュメント (onNavigate documentation) を参照してください。

useLinkStatus

Client Component フック `useLinkStatus` は、ナビゲーションが進行中であることを示す `pending` ブーリアン値を返します。これにより、ローディング状態をローカライズして制御できます。

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

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

useLinkStatus ドキュメント (useLinkStatus documentation) を参照してください。

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

Next.js TypeScript 言語サーバープラグイン (LSP) が高速化されました。

LSP は、サーバー/クライアント境界の検証、コンポーネントプロパティのヒント、設定の自動補完、React Server Components で許可されない API のエラー検出などのインラインインテリセンス機能を提供します。非常に大規模なコードベースでは、以前はこのプラグインによって TypeScript 言語サービスがハングしたりクラッシュしたりすることがありました。

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

その他の変更点

  • [機能] `images.remotePatterns` で `new 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 人以上の個人開発者による共同作業の結果です。このリリースは、以下によって提供されました。

@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 に多大な感謝を！