Next.js 15.2

claudejamodel: claude-sonnet-4-20250514

Next.js 15.2

Next.js 15.2には、エラーのデバッグ、メタデータ、Turbopack、その他の機能に関するアップデートが含まれています：

再設計されたエラーUI と改善されたスタックトレース：再設計されたデバッグ体験
ストリーミングメタデータ：非同期メタデータがページレンダリングやクライアントサイドページ遷移をブロックしなくなりました
Turbopackパフォーマンス改善：より高速なコンパイル時間とメモリ使用量の削減
React View Transitions（実験的）：ReactのView Transitions APIの実験的サポート
Node.js Middleware（実験的）：MiddlewareでのNode.jsランタイム使用の実験的サポート

アップグレード方法

今すぐアップグレードするか、以下のコマンドで開始してください：

# 自動アップグレードCLIを使用
npx @next/codemod@canary upgrade latest

# ...または手動でアップグレード
npm install next@latest react@latest react-dom@latest

# ...または新しいプロジェクトを開始
npx create-next-app@latest

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

アプリケーション構築中に遭遇するエラーに対して、視覚的および品質的な改善を追加しました。各改善領域について説明します：

エラーオーバーレイ

Next.jsのエラーメッセージのUIとプレゼンテーションを全面的に見直し、理解しやすくしました。新しいデザインでは、メッセージ、関連するコードフレーム、コールスタックなどのエラーの核心的な詳細をハイライトし、ライブラリや依存関係のコードからのノイズを削減しています。これにより、何が問題だったかの根本原因を素早く把握し、より迅速に修正を開始できます。

Reactで新しく導入されたowner stacks機能を活用することで、エラーの発生源についてより高い精度の情報を提供できるようになりました。Next.jsは、エラーの原因となった要素の作成に責任がない中間要素をスキップして、エラーを投げる責任があるサブコンポーネントを表示できるようになりました。

また、追加の設定を必要とせずに、インジケーターの設定をカスタマイズしやすくしました。

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

開発インジケーター

開発情報を新しい合理化されたインジケーターに統合し、レンダリングモードやビルドステータスなどの詳細を表示します。コンパイル中は、ルート間を移動する際に薄暗くアニメーションするNext.jsロゴが表示されます。コンパイルが完了してReactがレンダリングを開始すると、ロゴが明るくなり、アプリケーションの状態を視覚的に示します。

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

現在のルートのレンダリングモード（static/dynamic）
Turbopackコンパイルステータス
エラーオーバーレイへの素早いアクセスを持つアクティブなエラー

今後のアップデートでは、このメニューに以下が追加される予定です：

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

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

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

generateMetadataで動的データを取得したり、非同期操作を実行したりすることがしばしば必要になります。Next.jsの以前のバージョンでは、このメタデータがドキュメントの<head>に含められるよう、初期UIが送信される前にメタデータの生成が完了する必要がありました。これは、高速な初期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のネイティブブラウザImplementationに基づいています。安定性が進歩するにつれて、より多くのドキュメントと例を公開する予定です。

Node.js Middleware（実験的）

Next.js MiddlewareでNode.jsランタイムの使用を許可する新しい実験的フラグに取り組んできました。この機能を有効にするには、next.config.jsに以下を追加してください：

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

その後、Middleware設定エクスポートでNode.jsランタイムを指定できます：

import bcrypt from 'bcrypt';

const API_KEY_HASH = process.env.API_KEY_HASH; // 環境変数の事前ハッシュ化されたAPIキー

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フラグを追加
[機能] next/imageでimages.qualitiesのサポートを追加
[非推奨] App Routerでのi18n設定の非推奨について警告
[改善] no-html-link-for-pagesのlintパフォーマンスを改善
[改善] "use action"ディレクティブが誤って使用された場合にビルドエラーを出力
[改善] 開発中にglobal-errorを開発オーバーレイと一緒に表示
[改善] 開発サーバーでHTTPリクエストログの無効化を許可
[改善] ページネーションSEOリンクタグを追加
[改善] metadataと<Link>コンポーネントのJSDocsを改善
[改善] Middlewareがnext/imageリクエストにマッチするように
[改善] デフォルトエラー境界メッセージにホスト名を追加
[改善] 明示的なエラー境界で処理されないエラーをreportErrorを通じて送信

貢献者

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

要約

Summary

Key Points

翻訳

Next.js 15.2

アップグレード方法

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

エラーオーバーレイ

開発インジケーター

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

Turbopackパフォーマンス改善

React View Transitions（実験的）

Node.js Middleware（実験的）

近日公開予定

その他の変更

貢献者