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 のエラーメッセージのUIと表示方法を全面的に見直し、理解しやすくしました。新しいデザインは、エラーメッセージ、関連するコードフレーム、コールスタックといったエラーのコアな詳細を強調し、ライブラリや依存関係のコードからのノイズを低減します。これにより、何が問題だったのかを素早く特定し、より迅速に修正を開始できます。

React の新機能である owner stacks を活用することで、エラーの発生元をより忠実に提供できるようになりました。Next.js は、エラーの原因となった要素を生成した責任のあるサブコンポーネントを、エラーを引き起こした要素を生成する責任のない中間要素をスキップして表示できるようになりました。

追加の設定なしで、インジケーターの設定をより簡単に行えるようにもなりました。

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

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

開発インジケーター

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

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

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

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

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

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

PPR (Partial Prerendering) デバッグツール
キャッシュ監視機能
追加の開発者ツール

この統合アプローチにより、すべての重要な開発情報が1つのアクセスしやすい場所に配置されます。皆様からのフィードバックに基づき、今後のリリースでこの機能を継続的に改善・拡張していきます。

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

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

これは、高速な初期UIが利用可能だった多くのページで、ユーザーの視覚的な表示に影響しないデータ要件によって初期ペイントが遅延していたことを意味します。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 に以下を追加してください。

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

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

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

安定性が向上し次第、より多くのドキュメントと例を公開します。

Node.js Middleware (実験的)

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

この機能を有効にするには、next.config.js に以下を追加してください。

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

次に、Middleware の config エクスポートで Node.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 のリンターパフォーマンスを改善 (PR)
[改善] "use action" ディレクティブの誤用時にビルドエラーを発生させる (PR)
[改善] 開発中にグローバルエラーを開発オーバーレイと同時に表示する (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, and Zack.
Turbopack チーム: Benjamin, Donny, Maia, Niklas, Tim, Tobias, and Will.
Next.js Docs チーム: Delba, Rich, Ismael, and 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, and @cassian-goode に感謝します！