Next.js 15 Release Note を日本語で簡単にまとめました

はじめに

Next.js 15 がリリースされました。この記事では、Next.js 15 の Release Note を一部抜粋して日本語で簡単にまとめました。

詳細が知りたい方は公式を参照してください。 https://nextjs.org/blog/next-15#

Next.js 15 へのアップデート方法

すでにNext.jsを使っている場合、以下のコマンドでアップデートできます。

npx @next/codemod@canary upgrade latest

これはいくつかの codemod をバンドルしているもので、アップデートの際には、いくつかの質問に答える必要があります。

基本的には default の指示に従っておくと問題ないです。(Enterを押すだけ)

これを利用することで、アップデートに必要な変更をある程度自動的に行ってくれます。

ただし、試してみたところ完全なものではなく、これを実行した後にプロジェクト全体を見直す必要がありあそうです。いくつか修正が必要な箇所があるかもしれません。

手動で行いたい場合は下記を実行してから修正を行なってください。

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

Async Request APIs (Breaking Change)

headers, cookies, params, searchParams が非同期になりました。

import { cookies } from "next/headers";

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get("token");

  // ...
}

個人的には params, searchParams が非同期になったのが一番影響が大きいかなと思います。

dynamic route で使っているページでは下記のような変更が必要になります。

export default async function Page(props: Promise<{ params: id }>) {
  const { id } = await props.params;

Caching Semantics

キャッシュの方針が変更されました。基本的に v14 では、キャッシュがデフォルトで有効になっていましたが、v15 ではキャッシュがデフォルトで無効になりました。

重要な点を抜粋し羅列します。

fetch の結果はデフォルトでキャッシュされなくなりました
GET のRouter Handlers はデフォルトでキャッシュされなくなりました
- ただし、sitemap.ts、opengraph-image.tsx、icon.tsxなどの特殊なルートハンドラや、その他のメタデータファイルはデフォルトでは静的なままです。
Client のRouterキャッシュは、デフォルトでページコンポーネントをキャッシュしなくなりました。
- ただし、戻るや進むボタンを押した場合には、キャッシュが利用されます

React 19

App Router を使用している場合には React v19 RC を使用する必要がありそうです。 Pages Router を使用している場合には、React v18 でも問題ないです。

両方を併用している場合には、React v19RC を使用することが推奨されているように読み取れました。

原文では “React 18のPages RouterとReact 19のApp Routerを同じアプリケーションで実行することは可能ですが、この設定はお勧めしません。 2つのバージョン間の基礎となるAPIとレンダリングロジックが完全に一致していない可能性があるためです。” という表現になっています。

React Compiler (Experimental)

個人的には好きな内容ですが、まだ開発に直結しないことが多いと思うので割愛します。

Hydration error improvements

Hydration error 時に表示されるエラーメッセージが改善されました。

Turbopack Dev

Webpack の代わりになるものとして、Turbopack がありましたが、Stableになったようです。 (これまでStableではなかったのか…)

next dev --turbo

上記のコマンドで、Turbopack を有効にすることができます。

Static Route Indicator

開発時に画面の左下に、静的ルートか動的ルートかを示すインジケータが表示されるようになりました。

Executing code after a response with unstable_after (Experimental)

一般的になんらかの log などを取りたい時にページやレイアウトに log 取得用の関数を実行したりすることがあります。これらの処理はユーザーには関係ないので、ユーザーへのレスポンス後に行うことが望ましいです。実験的にそれができるようになりました。

next.config.js に下記のような設定を追加することで利用できます。

const nextConfig = {
  experimental: {
    after: true,
  },
};

export default nextConfig;

実際の利用方法は下記のようになります。

import { unstable_after as after } from "next/server";
import { log } from "@/app/utils";

export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });

  // Primary task
  return <>{children}</>;
}

v15では未使用の server action は自動的に削除されるようになったため、セキュリティが向上しバンドルサイズも削減されるようになりました。

はじめに

Next.js 15 へのアップデート方法

Async Request APIs (Breaking Change)

Caching Semantics

React 19

React Compiler (Experimental)

Hydration error improvements

Turbopack Dev

Static Route Indicator

Executing code after a response with unstable_after (Experimental)

instrumentation.js

Form Component

next.config.ts

Improvements for self-hosting

Enhanced Security for Server Actions

Optimizing bundling of external packages (Stable)

ESLint 9 Support

Development and Build Improvements

Other Changes