🗞️

Next.js 15.1の主なアップグレード内容

2024/12/11に公開

JavaScript

はじめに

Next.js15.1が出たので、気になった内容をまとめてみました。
間違いなどありましたら、コメントなどで教えてください。

https://nextjs.org/blog/next-15-1

各種コマンド

Next.jsの最新バージョンにアップグレードする際に、必要なコードの修正や設定変更を自動的に行います。手動で変更する手間を省く。

npx @next/codemod@canary upgrade latest

Next.jsプロジェクトで使われているnext、react、react-domを手動で最新バージョンに更新します。この場合、コードの修正は自分で行う必要があります。

npm install next@latest react@latest react-dom@latest

最新のバージョンで新規プロジェクトを作成

npx create-next-app@latest

主な更新内容

React 19を完全サポート
エラーデバッグの改善
after(安定)
forbidden(403)/unauthorized(401) エラーページの追加 (Canary)

それぞれの詳細

主な変更内容についての詳細を書いていきます。

React 19を完全サポート

React 19が、Pages RouterとApp Routerの両方で正式にサポートされました。
React 19についての詳しい情報は、以下が参考になります。

エラーデバッグの改善

Next.jsのエラーデバッグが改善され、ターミナル、ブラウザー、または接続されたデバッガーのいずれに問題が表示されても、問題の原因をすばやく特定できるようになりました。
これらの機能強化は、WebpackとTurbopack (現在は Next.js 15で安定) の両方に適用されます。
以下に、主な変更点が記載されています。
もっと詳しい内容については、追記したいと思います。

after APIの安定版がリリース

レスポンスがストリーミングを終了した後に処理するタスクをスケジューリングできるようにし、プライマリ・レスポンスをブロックすることなくセカンダリ・タスクを実行できるようにするAPIです。
そのafter APIが安定版としてリリースされました。
after APIの詳しい情報は、以下をご覧ください。

forbidden(403)/unauthorized(401) エラーページの追加 (Canary)

実験的にですが、403, 401の場合に専用のエラーページを表示する機能が追加されました。
実装方法は、以下のようになります。

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

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>;
}

専用のエラーページは、今まで同様に「app」フォルダ配下にファイルを作成します。

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>
  );
}