Next.js 15.2 | Next.js

Next.js 15.2 には、エラーデバッグ、メタデータ、Turbopack などに関する更新が含まれています：

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

今すぐアップグレードするか、以下で新規プロジェクトを開始：

Terminal

# 自動アップグレード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のレンダリングが開始されるとロゴが明るくなり、アプリケーションの状態を視覚的に確認できます。

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

現在のルートのレンダリングモード（静的/動的）
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に以下を追加します：

next.config.js

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

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

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

安定性が進むにつれて、より多くのドキュメントと例を公開する予定です。

Node.jsミドルウェア（実験的機能）

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

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

next.config.js

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

その後、ミドルウェアのconfigエクスポートでNode.jsランタイムを指定できます：

middleware.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キーが検証されました');
}
 
export const config = {
  runtime: 'nodejs',
};

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

この機会にミドルウェアAPIの改善と再構築を計画しています。提案や要望があればぜひお知らせください。Node.jsミドルウェアはコミュニティからのトップリクエストであり、これに対応できたことを嬉しく思います。

近日公開予定

「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）
[改善] 開発中にglobal-errorをdevオーバーレイと共に表示（PR）
[改善] 開発サーバーでHTTPリクエストログを無効化可能に（PR）
[改善] ページネーションSEOリンクタグを追加（PR）
[改善] metadataと<Link>コンポーネントのJSDocを改善（PR）
[改善] ミドルウェアが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の皆さん、ご協力ありがとうございました！