Next.js 15.1 | Next.js

Next.js 15.1 は、コアのアップグレード、新しいAPI、および開発者エクスペリエンスの向上をもたらします。主なアップデートは以下の通りです。

React 19 (安定版): Pages Router と App Router の両方で React 19 のサポートが正式に利用可能になりました。
エラーデバッグの改善: DX の向上と、ブラウザおよびターミナル向けのより優れたソースマップ。
after (安定版): レスポンスのストリーミング完了後にコードを実行するための新しいAPI。
forbidden / unauthorized (実験的): より詳細な認証エラー処理を可能にする新しいAPI。

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

# 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

React 19 (安定版)

Next.js 15.1 では、React 19 が完全にサポートされるようになりました。

Pages Router の場合: Pages Router と App Router の両方で、React 18 の継続的なサポートとともに、Release Candidate や Canary リリースを必要とせずに React 19 安定版を使用できるようになりました。
App Router の場合: 引き続き、組み込みの React Canary リリースを提供します。これらには、新しい React リリース前のフレームワークで検証中のすべての安定版 React 19 の変更が含まれます。

Next.js 15 リリース以降、React 19 の重要な追加機能として「サイレントプリウォーミング」があります。

React 19 のアップデートの詳細については、公式 React 19 ブログ投稿を参照してください。

エラーデバッグの改善

Next.js ではエラーデバッグが改善され、ターミナル、ブラウザ、またはアタッチされたデバッガーで発生する問題のソースを迅速に特定できるようになりました。これらの強化は、Webpack と Turbopack (Next.js 15 で安定版になりました) の両方に適用されます。

ソースマップの強化

ソースマップの改善された使用により、エラーの発生元をたどりやすくなりました。Next.js が外部依存関係のスタックフレームを非表示にし、アプリケーションコードに焦点を当てることができるように、ソースマップの ignoreList プロパティを実装しました。

メソッド名のソースマッピングをより正確にするために、Webpack よりも改善されたソースマップの処理と検出を備えた Turbopack (現在安定版) を採用することをお勧めします。

ライブラリ作成者向け: ライブラリを公開する際は、特に外部として構成されている場合 (例: serverExternalPackages 設定内)、ソースマップの ignoreList プロパティを埋め込むことをお勧めします。

スタックフレームの折りたたみ

コードの最も関連性の高い部分を強調するために、スタックフレームの折りたたみロジックを改善しました。

ブラウザとエラーオーバーレイで: サードパーティの依存関係からのスタックフレームはデフォルトで非表示になり、アプリケーションコードに焦点が当てられます。開発者ツールまたはオーバーレイの「無視されたフレームを表示」をクリックすると、非表示のフレームを表示できます。
ターミナルで: サードパーティの依存関係フレームもデフォルトで折りたたまれ、エラーフォーマットはブラウザの出力と一致するようになり、一貫したデバッグエクスペリエンスが提供されます。開発中に完全なスタックトレースが必要になった場合に重要な情報を見逃さないように、エラーはブラウザでリプレイされます。

プロファイリングの強化

無視されたスタックフレームは、組み込みのブラウザプロファイラーでも認識されます。これにより、外部ライブラリからのノイズなしにコード内の低速な関数を特定できるため、アプリケーションのプロファイリングが容易になります。

エッジランタイムによる改善

エッジランタイムを使用する場合、エラーは開発環境全体で一貫して表示されるようになり、シームレスなデバッグが保証されます。以前は、ログに記録されたエラーにはメッセージのみが含まれ、スタックは含まれていませんでした。

変更前後

ターミナル 変更前

 ⨯ app/page.tsx (6:11) @ eval
 ⨯ Error: boom
    at eval (./app/page.tsx:12:15)
    at Page (./app/page.tsx:11:74)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
digest: "380744807"
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |           ^
  7 |   }, [])
  8 |
  9 |   throwError()
 GET / 500 in 2354ms

ターミナル 変更後

  ⨯ Error: boom
    at eval (app/page.tsx:6:10)
    at Page (app/page.tsx:5:32)
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |          ^
  7 |   }, [])
  8 |
  9 |   throwError() {
  digest: '225828171'
}

エラーオーバーレイ 変更前

An example of the Next.js error overlay before version 15.1 — バージョン15.1より前のNext.jsエラーオーバーレイの例

エラーオーバーレイ 変更後

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

これらの改善により、エラーがより明確で直感的になり、デバッグではなくアプリケーションの構築に時間を費やすことができるようになります。

また、今後のリリースで登場する、再設計されたエラーオーバーレイUIを発表できることを嬉しく思います。

`after` (安定版)

最初の Next.js 15 RC で導入された after() API が、現在安定版になりました。

after() は、プライマリレスポンスをブロックすることなく、ユーザーへのレスポンスストリーミング完了後に、ロギング、分析、その他のシステム同期などのタスクを実行する方法を提供します。

主な変更点

導入以来、after() を安定化し、以下を含むフィードバックに対応しました。

セルフホスト型Next.jsサーバーのサポート向上。
after() が他のNext.js機能と連携していたシナリオのバグ修正。
拡張性の向上により、他のプラットフォームが独自の waitUntil() プリミティブを注入して after() をパワーアップできるようにしました。
Server Actions および Route Handlers での cookies() や headers() などのランタイムAPIのサポート。

import { after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });
 
  // Primary task
  return <>{children}</>;
}

after API について、およびその活用方法については、ドキュメントで詳しくご覧ください。

`forbidden` および `unauthorized` (実験的)

Next.js 15.1 には、コミュニティのフィードバックに基づいた 2 つの実験的な API、forbidden() と unauthorized() が含まれています。

フィードバックをお待ちしています — 開発環境で試して、このディスカッショントレッドでご意見をお聞かせください。

概要

App Router をご存知であれば、カスタマイズ可能な not-found.tsx ファイルと並んで 404 をトリガーするために notFound() を使用したことがあるかもしれません。バージョン 15.1 では、このアプローチを認証エラーに拡張します。

• forbidden() は、forbidden.tsx を介してカスタマイズ可能な UI を備えた403エラーをトリガーします。

• unauthorized() は、unauthorized.tsx を介してカスタマイズ可能な UI を備えた401エラーをトリガーします。

ご留意ください: notFound() エラーと同様に、初期レスポンスヘッダーが送信された後にエラーがトリガーされた場合、ステータスコードは 200 になります。詳細はこちら。

機能の有効化

この機能はまだ実験的なため、next.config.ts ファイルで有効にする必要があります。

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
 
export default nextConfig;

注意: next.config.ts のサポートは Next.js 15 で導入されました。詳細はこちら。

`forbidden()` および `unauthorized()` の使用

forbidden() と unauthorized() は、Server Actions、Server Components、Client Components、または Route Handlers で使用できます。例を以下に示します。

import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';
 
export default async function AdminPage() {
  const session = await verifySession();
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden();
  }
 
  // Render the admin page for authorized users
  return <h1>Admin Page</h1>;
}

カスタムエラーページの作成

エラーページをカスタマイズするには、次のファイルを作成します。

import Link from 'next/link';
 
export default function Forbidden() {
  return (
    <div>
      <h2>Forbidden</h2>
      <p>You are not authorized to access this resource.</p>
      <Link href="/">Return Home</Link>
    </div>
  );
}

import Link from 'next/link';
 
export default function Unauthorized() {
  return (
    <div>
      <h2>Unauthorized</h2>
      <p>Please log in to access this page.</p>
      <Link href="/login">Go to Login</Link>
    </div>
  );
}

この機能の提案とAPIのプロトタイピングにご協力いただいたClerk に感謝いたします。この機能を 15.2 で安定化する前に、より幅広いユースケースをサポートするために API にさらに機能と改善を追加する予定です。

詳細については、unauthorized および forbidden API のドキュメントをお読みください。

その他の変更点

[機能] create-next-app で ESLint 9 を使用 (PR)
[機能] 最大キャッシュタグを 128 に増加 (PR)
[機能] 実験的な CssChunkingPlugin を無効にするオプションを追加 (PR)
[機能] 実験的なCSSインラインサポートを追加 (PR)
[改善] Sass legacy-js-api 警告をサイレント化 (PR)
[改善] リライト使用時の未処理の拒否を修正 (PR)
[改善] Webpack ワーカーが失敗した場合に親プロセスが終了することを保証 (PR)
[改善] キャッチオールルートでのルートインターセプトの修正 (PR)
[改善] リクエスト重複除去でのレスポンスクローニング問題の修正 (PR)
[改善] 複数のルートレイアウト間の Server Action リダイレクトの修正 (PR)
[改善] Turbopack との互換性のために MDX プラグインを文字列として提供するサポート (PR)

コントリビューター

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

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

@sokra, @molebox, @delbaoliveira, @eps1lon, @wbinnssmith, @JamBalaya56562, @hyungjikim, @adrian-faustino, @mottox2, @lubieowoce, @bgw, @mknichel, @wyattjoh, @huozhi, @kdy1, @mischnic, @ijjk, @icyJoseph, @acdlite, @unstubbable, @gaojude, @devjiwonchoi, @cena-ko, @lforst, @devpla, @samcx, @styfle, @ztanner, @Marukome0743, @timneutkens, @JeremieDoctrine, @ductnn, @karlhorky, @reynaldichernando, @chogyejin, @y-yagi, @philparzer, @alfawal, @Rhynden, @arlyon, @MJez29, @Goodosky, @themattmayfield, @tobySolutions, @kevinmitch14, @leerob, @emmanuelgautier, @mrhrifat, @lid0a, @boar-is, @nisabmohd, @PapatMayuri, @ovogmap, @Reflex2468, @LioRael, @betterthanhajin, @HerringtonDarkholme, @bpb54321, @ahmoin, @Kikobeats, @abdelrahmanAbouelkheir, @lumirlumir, @yeeed711, @petter, and @suu3 に多大な感謝を！