Next.js 16 新機能まとめ｜16.3までの変更点と移行を実測

Next.js 16 は、キャッシュを「明示的に書いたところだけ」にする Cache Components と、Turbopack の標準化を柱にしたメジャーバージョンです。 2025年10月の 16.0 のあと、16.1（2025年12月）、16.2（2026年3月）、16.3（2026年8月）と機能が積み増され、2026年9月時点の最新安定版は 16.3.6 です。

この記事では、16.0〜16.3 の新機能と破壊的変更を公式ブログ・公式ドキュメントで確認できたものだけ一覧表にまとめました。さらに、Next.js 15.5 のプロジェクトを実際に 16.3.6 へ上げ、codemod（自動書き換えツール）の出力、ビルドで出たエラー文、直し方、ビルド時間（キャッシュあり／なし）の実測値を載せています。「何が変わったか」だけでなく「上げると何が起きて、どう直すか」までこの1ページでわかります。

Next.js 16 新機能の早見表（16.0〜16.3）

2026年9月時点のバージョンと検証環境

本番で使うなら 16.3 系の最新パッチを選びます。 2026年9月22日に 16.3.6（と 15.5.26）が公開され、さらに 9月30日に 16.3 系のセキュリティリリースが予告されています（9件の脆弱性修正を予定）。執筆時点で npm に 16.3.7 はまだ公開されていないため、公開後は 16.3.7 以降を推奨します。

15 → 16 の破壊的変更一覧

上げる前に、この表の「15まで」の書き方がコードにないかを検索しておくと、移行がスムーズです。

16.0 の主な新機能

Cache Components：キャッシュは書いた所だけ

16.0 からは「何もしなければリクエストのたびに実行」が基本で、キャッシュしたい所に 'use cache' を書きます。 15 までの「暗黙のキャッシュ」を明示的なものに置き換える仕組みです。

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

// lib/products.ts
import { cacheLife, cacheTag } from "next/cache";

export async function getProducts() {
  "use cache";
  cacheLife("hours");
  cacheTag("products");
  return db.products.findMany();
}

有効にすると、fetch・DB・cookies() などを <Suspense> の外で待つページはビルドエラーになり、「ストリームする／キャッシュする／待つと明示する」のどれかを選ぶ形になります。詳しい書き方とエラーの実例は別記事「Next.js use cache の使い方」で扱っています。

キャッシュ API：updateTag・refresh・revalidateTag

データを変えたあとの「画面の更新」は、目的に合わせて3つから選びます。

"use server";
import { refresh, revalidateTag, updateTag } from "next/cache";

export async function saveProfile(userId: string) {
  await db.users.update(/* ... */);
  updateTag(`user-${userId}`); // 自分の変更をすぐ見せる
}

export async function publishArticle() {
  await db.articles.publish(/* ... */);
  revalidateTag("articles", "max"); // 裏で作り直せば十分
}

export async function markAsRead(id: string) {
  await db.notifications.markAsRead(id);
  refresh(); // キャッシュしていない未読件数だけ取り直す
}

proxy.ts：middleware.ts の新しい名前

中身は同じで、ファイル名と関数名を変えるだけです。 proxy.ts は Node.js ランタイムで動きます。

// proxy.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  if (request.nextUrl.pathname === "/old") {
    return NextResponse.redirect(new URL("/", request.url));
  }
  return NextResponse.next();
}

export const config = { matcher: ["/old"] };

ビルド出力では ƒ Proxy (Middleware) と表示されます（実測）。

Turbopack が標準、React Compiler が安定

next dev と next build は何も指定しなくても Turbopack で動きます。 webpack の独自設定がある場合は next build --webpack で従来どおりビルドできます。

React Compiler（コンポーネントを自動でメモ化するコンパイラー）は reactCompiler: true で有効にします。既定ではオフです。16.3 では Rust 版を試す experimental.turbopackRustReactCompiler も追加されました。

Next.js DevTools MCP

AI コーディングエージェントに、ルート一覧・ログ・エラーの詳細を渡す MCP（Model Context Protocol）連携です。 16.1 で get_routes ツールが追加されました。

16.1〜16.3 で増えたもの

16.1：dev のディスクキャッシュと next upgrade

• next dev のディスクキャッシュが安定・既定オン。再起動後の初回コンパイルが速くなります（公式の例：react.dev で 3.7秒 → 380ms）。
• next upgrade コマンドが入りました。16.1 未満では使えないため、15 系からは codemod を使います（後述の実測参照）。
• next experimental-analyze（Bundle Analyzer、実験的）、next dev --inspect。

16.2：速度、Adapters、エラーまわり

• dev の起動（localhost が開けるまで）が 16.1 比で約87%短縮、Server Components のペイロード処理改善で HTML 描画が 25〜60% 高速（公式値）。
• Adapters API が安定版に。デプロイ先がビルド出力を加工できます。
• 本番の既定エラーページを刷新、dev のターミナルに Server Function の実行ログ、ハイドレーション差分の表示改善。
• next start --inspect、<Link transitionTypes>、ImageResponse の高速化。実験的に unstable_catchError() など。

16.3：ビルドキャッシュ、AGENTS.md、Instant Navigations

16.3 は 16.0 以来の大型アップデートで、既存アプリにも効く改善が多く入っています。

// 16.3：catchError で作るエラー境界（Client Component）
"use client";
import { catchError, type ErrorInfo } from "next/error";

function ErrorFallback(props: { title: string }, { error, retry }: ErrorInfo) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{error.message}</p>
      <button onClick={() => retry()}>もう一度読み込む</button>
    </div>
  );
}

export default catchError(ErrorFallback);

// 16.3：root params（app/[lang]/posts/[slug]/page.tsx）
import { lang } from "next/root-params";

export default async function PostPage(props: PageProps<"/[lang]/posts/[slug]">) {
  const { slug } = await props.params;
  const language = await lang(); // props で受け渡さなくても読める
  return <p>{language} / {slug}</p>;
}

15.5 のプロジェクトを 16.3.6 へ上げてみた

ここからは実測です。 create-next-app@15.5.26 で作ったプロジェクトに、15 時代によくある書き方（middleware.ts、同期の params・cookies()、1引数の revalidateTag、serverRuntimeConfig、images.domains、next lint、default.js のない並列ルート）を入れてから上げました。

手順1：next upgrade は 15.5 では使えない

npx next upgrade

Invalid project directory provided, no such directory: /…/up155/upgrade

15.5 の next には upgrade コマンドがないため、「upgrade というディレクトリ」と解釈されました。 公式ドキュメントのとおり、16.1 未満からは codemod を使います。

手順2：codemod で 16.3.6 へ

npx @next/codemod@canary upgrade latest

CI やエージェントのように標準入力が端末でない場合は、質問に既定値で答える非対話モードになります（--yes と同じ）。実際の出力（抜粋）です。

  Running in non-interactive mode. Every prompt will accept its default.
  Detected installed versions:
  - React: v19.1.0
  - Next.js: v15.5.26
  Applying all codemods recommended for your upgrade:
    - middleware-to-proxy
    - remove-unstable-prefix
    - remove-experimental-ppr
    - cache-components-instant-false
    - remove-partial-prefetch
Upgrading your project to Next.js 16.3.6...
✔ Codemods have been applied successfully.

codemod が変えたもの・変えなかったものを整理すると次のとおりです。

手順3：ビルドで出たエラー・警告と対処

npx next build を実行し、出たものを1つずつ直しました。

ポイントは、#5 はビルドが通ってしまい、ページを開いたときに初めてわかることです。 動的ルートは next start で一通り開いて確認しておくと確実です。

直す前と後：同期の params・cookies

// 直す前（15 では警告つきで動いていた）
import { cookies } from "next/headers";

export default function ItemPage({ params }: any) {
  const theme = cookies().get("theme")?.value ?? "light";
  return <h1>Item {params.id}（{theme}）</h1>;
}

// 直した後（16）
import { cookies } from "next/headers";

export default async function ItemPage({ params }: PageProps<"/items/[id]">) {
  const { id } = await params;
  const theme = (await cookies()).get("theme")?.value ?? "light";
  return <h1>Item {id}（{theme}）</h1>;
}

PageProps<"/items/[id]"> は Next.js が生成するグローバル型で、params の型を自動で付けてくれます。

この書き換えは codemod でもできます。next-async-request-api を別に実行すると、同期アクセスを await に書き換えました（実測、1ファイル変更）。

npx @next/codemod@canary next-async-request-api .

-export default function ItemPage({ params }: any) {
-  const theme = (cookies() as any).get("theme")?.value ?? "light";
+export default async function ItemPage(props: any) {
+  const params = await props.params;
+  const theme = (await cookies() as any).get("theme")?.value ?? "light";

--skip-adoption を付けた場合

同じ 15.5 の状態から --skip-adoption を付けて実行すると、適用される codemod が3つになり、instant = false は追加されませんでした。

npx @next/codemod@canary upgrade latest --yes --skip-adoption

  Applying all codemods recommended for your upgrade:
    - middleware-to-proxy
    - remove-unstable-prefix
    - remove-experimental-ppr

まず 16 に上げて動かし、Cache Components は後から段階的に入れるなら、この形がシンプルです。

手順4：ビルド成功

▲ Next.js 16.3.6 (Turbopack)
✓ Running next.config.ts took 30ms

  Creating an optimized production build ...
✓ Compiled successfully in 34.0s
  Running TypeScript ...
  Finished TypeScript in 13.4s ...
  Collecting page data using 1 worker ...
✓ Generating static pages using 1 worker (6/6) in 769ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /dashboard
├ ○ /dashboard/members
└ ƒ /items/[id]


ƒ Proxy (Middleware)

15.5 の出力にあった Size / First Load JS 列はなくなり、各工程の所要時間が表示されるようになっています。初回ビルドでは tsconfig.json の jsx が react-jsx に自動で書き換えられる旨のメッセージも出ました。上げたあとに npx next upgrade を実行すると、次のように表示されます。

✓ Current Next.js version is already on the target version "v16.3.6".

ビルド時間の実測：キャッシュあり／なし

16.3 から next build もディスクキャッシュを使うため、コードを変えていない2回目以降のビルドは大きく短くなります。 上のプロジェクトで、.next を消した「キャッシュなし」と、そのまま続けて実行した「キャッシュあり」を交互に3回ずつ測りました（2 vCPU、Node.js 22.22.2）。

• コンパイル部分は 30秒台 → 1秒未満になりました。全体では約4分の1です。
• 型チェックはキャッシュの対象外なので残ります。16.3 では typescript@^7 を入れると型チェックが速くなると案内されています。
• キャッシュは .next/cache/turbopack に保存されていました（このプロジェクトで約35MB）。CI では .next/cache を保存・復元すると効果を受けられます。
• 小さなプロジェクト・2 vCPU の環境での値です。規模や環境で変わるため、傾向として見てください。公式ブログでは nextjs.org で 21秒 → 9.2秒などの例が紹介されています。

新規作成と next dev で変わったこと

create-next-app@16.3.6 で作ると、AGENTS.md と CLAUDE.md が最初から入っています。 生成された package.json の依存は next 16.3.6、react 19.2.8 で、dev / build スクリプトに --turbopack は付いていません（既定のため）。

上げたプロジェクトで next dev を起動すると、次のメッセージとともにファイルが作られました。

▲ Next.js 16.3.6 (Turbopack)
✓ Ready in 2.0s
✓ Generated AGENTS.md and CLAUDE.md for AI agents. Set `agentRules: false` in next.config to disable.

<!-- BEGIN:nextjs-agent-rules -->
（見出し「This is NOT the Next.js you know」）
This version has breaking changes — … Read the relevant guide in `node_modules/next/dist/docs/` … before writing any code. Heed deprecation notices.
<!-- END:nextjs-agent-rules -->

CLAUDE.md の中身は @AGENTS.md の1行だけでした。AI エージェントに、手元の Next.js のバージョンに合ったドキュメント（node_modules/next/dist/docs/）を読ませるための仕組みです。不要なら next.config.ts に agentRules: false を設定します。

アップグレードのチェックリスト

よくある質問

Q. Next.js 16 に上げたら Cache Components を必ず使う必要がありますか？ A. いいえ。cacheComponents は既定でオフで、オフのままなら 15 に近い感覚で使えます。codemod が instant = false を追加した場合は、その行を削除するか、--skip-adoption を付けて実行します。

Q. 15 系からは next upgrade と codemod のどちらを使えばよいですか？ A. 16.1 未満には next upgrade がないため、npx @next/codemod@canary upgrade latest を使います。一度 16.1 以上になれば、以降は npx next upgrade で上げられます。

Q. middleware.ts のままでも動きますか？ A. Edge ランタイム向けに残っていますが非推奨で、将来削除予定です。中身は同じなので、proxy.ts への改名（codemod で自動）をおすすめします。

Q. ビルドキャッシュで古い内容が混ざる心配はありますか？ A. 変更のない成果物だけを再利用する仕組みです。気になる場合や、トラブル調査のときは .next を削除して、キャッシュなしでビルドし直すと切り分けられます。

まとめ

• Next.js 16 の柱は Cache Components と Turbopack 標準化。キャッシュは 'use cache' を書いた所だけになりました。
• 更新後の反映は updateTag・revalidateTag(tag, 'max')・refresh の3つから目的で選ぶ。
• 16.1 で next upgrade、16.3 でビルドのディスクキャッシュ・AGENTS.md・catchError・root params が追加。
• 15.5 からは codemod で上げ、instant = false の追加に注意（段階導入なら --skip-adoption）。
• 同期の params・cookies() はビルドが通っても実行時エラーになるので、await に直して実際に開いて確認。
• 実測では、キャッシュありのビルドはコンパイルが30秒台から1秒未満に。CI では .next/cache を保存。
• 2026年9月30日のセキュリティリリース後は 16.3.7 以降へ。

株式会社RJCでは、フレームワークのバージョンアップのたびに変更点を実際に試し、チームで知見を持ち寄っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。