Next.js 15.2 | Next.js

Next.js 15.2 には、デバッグエラー、メタデータ、Turbopackなどのアップデートが含まれています

再設計されたエラーUIと改善されたスタックトレース: 再設計されたデバッグエクスペリエンス
ストリーミングメタデータ: 非同期メタデータは、ページのレンダリングやクライアントサイドのページ遷移をブロックしなくなります
Turbopackのパフォーマンス改善: コンパイル時間の短縮とメモリ使用量の削減
React View Transitions (実験的): React の新しい View Transitions API の実験的なサポート
Node.js Middleware (実験的): Middleware で Node.js ランタイムを使用するための実験的なサポート

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

ターミナル

# 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

再設計されたエラーUIと改善されたスタックトレース

アプリケーション構築中に発生する可能性のあるエラーに対し、視覚的な改善と品質の改善の両方を行いました。改善された各領域について説明します。

エラーオーバーレイ

An example of the Next.js error overlay after version 15.2 — Next.js 15.2 以降の Next.js エラーオーバーレイの例

Next.jsのエラーメッセージのUIと表示を刷新し、より理解しやすくしました。新しいデザインでは、メッセージ、関連するコードフレーム、コールスタックなど、エラーの主要な詳細を強調し、ライブラリや依存関係のコードによるノイズを低減しています。これにより、何が問題だったのかを迅速に把握し、より速く修正を開始できます。

React に新しく導入されたオーナー・スタック機能を利用することで、エラーの発生源をより正確に特定できるようになりました。Next.jsは、エラーの原因となった要素を作成したわけではない中間要素をスキップして、エラーをスローしたサブコンポーネントを特定できるようになります。

また、追加の構成を必要とせずに、インジケーター設定を簡単にカスタマイズできるようになりました。

An example of the Next.js dev tools preferences — Next.js 開発ツール設定の例

エラーオーバーレイの下部にフィードバックセクションを追加し、エラーメッセージの有用性を評価できるようになりました。皆様のご意見は、一般的な問題点を理解し、デバッグを容易にするためにエラーメッセージを改善するのに役立ちます。

開発インジケーター

レンダリングから追加情報の表示まで、開発インジケーターのさまざまな状態。

開発情報を新しい合理化されたインジケーターに統合し、レンダリングモードやビルドステータスなどの詳細を表示するようにしました。

コンパイル中、ルート間を移動すると、薄暗くアニメーションするNext.jsロゴが表示されます。コンパイルが完了し、Reactがレンダリングを開始すると、ロゴが明るくなり、アプリケーションの状態を視覚的に示します。

開発インジケーターを開くと、以下が表示されます。

現在のルートのレンダリングモード (静的/動的)
Turbopack コンパイルステータス
エラーオーバーレイへのクイックアクセス付きの現在のアクティブなエラー

今後のアップデートでは、このメニューに以下が含まれる予定です。

PPR (部分事前レンダリング) デバッグツール
キャッシュ監視機能
追加の開発者ツール

この統一されたアプローチにより、すべての重要な開発情報に1か所からアクセスできるようになります。皆様からのフィードバックに基づき、今後のリリースでこの機能を改善・拡張し続けます。

ストリーミングメタデータ

generateMetadata で動的データをフェッチしたり、非同期操作を実行したりする必要があることがよくあります。以前のバージョンの Next.js では、初期UIがドキュメントの <head> に含められるように、このメタデータの生成が完了するまで初期UIが送信されませんでした。

これは、高速な初期UIが利用可能な多くのページにおいて、ユーザーが視覚的に見るものには影響しないデータ要件によって、初期表示が遅延していたことを意味します。Next.js 15.2 では、generateMetadata が完了する前であっても初期UIをブラウザに送信できるようにすることで、これを改善しました。

ただし、ドキュメントの <head> にメタデータがあることを期待するボットやクローラーとの互換性を維持するため、一部のボットのユーザーエージェントへのHTMLの送信は引き続き遅延させています。どのボットがこの処理を受けるかについてよりきめ細かな制御が必要な場合は、next.config.js の htmlLimitedBots オプションを介して、それらのボットにサービスを提供するために使用される正規表現をカスタマイズできます。

ストリーミングメタデータの詳細はこちら。

Turbopackのパフォーマンス改善

Turbopackは Next.js 15 で安定版としてマークされました。

私たちはTurbopackのパフォーマンス、特に永続的なキャッシュがないシナリオでの改善に取り組んできました。このリリースの一環として、以下の機能強化を導入しました。

コンパイル時間の高速化: 初期採用者からは、Next.js 15.1と比較して、ルートにアクセスする際のコンパイル時間が最大 57.6%高速化 したと報告されています。
メモリ使用量の削減: vercel.com アプリケーションでは、ローカル開発中に メモリ使用量が30%減少 したことが確認されました。

これらの改善により、TurbopackはほぼすべてのケースでWebpackよりも高速になるはずです。もし、あなたのアプリケーションでそうではないシナリオに遭遇した場合は、私たちに連絡してください — それらを調査したいと考えています。

また、永続的なキャッシュとプロダクションビルドも進捗しています。これらの機能はまだ実験的なリリースには至っていませんが、実際のプロジェクトでテストを開始しています。より広範囲で利用可能になり次第、詳細な指標を共有します。

React View Transitions (実験的)

React の新しい実験的な View Transitions API を有効にする機能フラグを追加しました。この新しい API を使用すると、アプリケーション内のさまざまなビューやコンポーネント間をアニメーション化できます。

この機能を有効にするには、next.config.js に以下を追加します。

next.config.js

module.exports = {
  experimental: {
    viewTransition: true,
  },
};

注: この機能は非常に実験的であり、今後のリリースで変更される可能性があります。

この機能の使用方法の詳細については、React リポジトリの元の View Transition プルリクエストを参照してください。この作業は、View Transitionsのネイティブブラウザ実装に基づいています。

安定性が向上するにつれて、より多くのドキュメントと例を公開していきます。

Node.js Middleware (実験的)

Next.js Middleware で Node.js ランタイムを使用できるようにする、新しい実験的なフラグに取り組んでいます。

この機能を有効にするには、next.config.js に以下を追加します。

next.config.js

module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

次に、Middleware の config エクスポートで Node.js ランタイムを指定できます。

middleware.js

import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Pre-hashed API key in env
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('API key validated');
}
 
export const config = {
  runtime: 'nodejs',
};

注: この機能はまだ本番環境での使用は推奨されていません。したがって、安定版ではなく next@canary リリースを使用している場合を除き、Next.js はエラーをスローします。

この機会を利用して、Middleware API を改善し、再構築する予定です。何か提案や要望があれば、ぜひお知らせください。Node.js Middleware はコミュニティからの最優先の要望であり、これに対応できたことを嬉しく思います。

近日公開

"use cache" (ベータ): "use cache" をスタンドアロン機能として安定化させる作業を進めています。今後のリリースで詳細をお知らせします。"use cache" の詳細はこちら。
Turbopack 永続キャッシュ (実験的): Vercel で永続キャッシュをドッグフーディングしており、良好なパフォーマンス改善が見られています。さらに安定化させたら、追加のフィードバックとテストのために機能フラグの背後でリリースする予定です。

その他の変更

[機能] create-next-app でヘッドレスのAPI専用アプリケーションを作成するための --api フラグを追加 (PR)
[機能] next/image で images.qualities のサポートを追加 (PR)
[非推奨] App Router での i18n 設定の非推奨に関する警告 (PR)
[改善] no-html-link-for-pages の lint パフォーマンスを改善 (PR)
[改善] "use action" ディレクティブが誤って使用された場合にビルドエラーを出力 (PR)
[改善] 開発中に global-error を開発オーバーレイと並べて表示 (PR)
[改善] 開発サーバーでHTTPリクエストログを無効にすることを許可 (PR)
[改善] ページネーションのSEOリンクタグを追加 (PR)
[改善] metadata および <Link> コンポーネントの JSDoc を改善 (PR)
[改善] Middleware は next/image リクエストと一致するように修正 (PR)
[改善] デフォルトのエラー境界メッセージにホスト名を追加 (PR)
[改善] 明示的なエラー境界で処理されないエラーを reportError 経由で送信 (PR)

貢献者

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

Next.js チーム: Andrew、Hendrik、Janka、Jiachi、Jimmy、Jiwon、JJ、Josh、Jude、Sam、Sebastian、Sebbie、Wyatt、および Zack。
Turbopack チーム: Benjamin、Donny、Maia、Niklas、Tim、Tobias、および Will。
Next.js Docs チーム: Delba、Rich、Ismael、および Lee。

@mischnic、@Marukome0743、@JamBalaya56562、@creationix、@noreiller、@styfle、@abdonrd、@ollyw、@aymericzip、@davidhu2000、@attilarepka、@devpla、@dydals3440、@huozhi、@wbinnssmith、@suu3、@PapatMayuri、@Sahil4883、@abyii、@molebox、@sokra、@maciej-ka、@abvthecity、@damiensedgwick、@alitas、@RiskyMH、@ytreister、@sommeeeer、@n1ckoates、@yongholeeme、@spidersouris、@gurkerl83、@cassiossantos、@Netail、@tknickman、@eur00t、@cseas、@nnnnoel、@Manoj-M-S、@lfades、@matmannion、@mikeboensel、@nphmuller、@apostolos、@k15a、@pavelee、@locothedev、@vexcat、@Zach-Jaensch、@decepulis、@gadcam、@lukahartwig、@jsanford8、@RobinMalfait、@raunofreiberg、@mohsen1、@skushagra、@amannn、@HQidea、@jrandolf、@smit-err、@littledivy、@k35o、@martinsione、@CvX、@msereniti、@Timer、@Iftee97、@chibicode、@RobPruzan、@PlagueFPS、@bjunix、@maximevtush、@michaelven、@sedlukha、@johannpinson、@AxelUser、@Nayeem-XTREME、@IcaroG、@blurrah、@lachlanjc、@ashi009、@conico974、@raphaelcosta、@dulmandakh、@khuezy、@Knoa0405、@wangsijie、@stefanprobst、@wentsul、@loopy-lim、@bratvanov、@hedgeday、および @cassian-goode に多大な感謝を申し上げます！