Next.js 16 リリース — Cache Components、Turbopack安定化、DevTools MCPなど変更点多数

10月22日、Vercelが「Next.js 16」と題した記事を公開した。この記事では、Turbopackの正式安定化、キャッシュモデルの刷新、AI連携によるデバッグ強化、そしてネットワーク境界を明確化するproxy.tsの導入など、Next.jsフレームワークの構造的進化について詳しく紹介されている。以下に、その内容を紹介する。

新機能と改善点

Cache Components — キャッシュの明示化と柔軟化

Next.js 16の目玉機能はCache Componentsだ。
これは、"use cache"ディレクティブによって、ページやコンポーネント単位でキャッシュを明示的に制御できる新モデルである。Partial Prerendering（PPR）で示された「静的と動的の中間領域」を、より完成度高く実現している。

以前のApp Routerでは暗黙的なキャッシュが働いていたが、Next.js 16ではすべて明示的（opt-in）に切り替わった。つまり、キャッシュを有効にしたい箇所にのみ"use cache"を記述すればよい。

設定ファイルでCache Componentsを有効化

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

ページ全体をキャッシュする例

// app/page.tsx
"use cache"; // ページ全体をキャッシュ対象にする

import { getPosts } from "@/lib/api";

export default async function Page() {
  const posts = await getPosts(); // データフェッチ結果をキャッシュ
  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </main>
  );
}

上記のように、ページ先頭で"use cache"を宣言すると、Next.jsが自動的にキャッシュキーを生成し、同一リクエストでは結果を再利用する。

コンポーネント単位でキャッシュする例

// app/components/UserProfile.tsx
"use cache"; // コンポーネント単位でキャッシュ

import { getUser } from "@/lib/api";

export async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId);
  return (
    <section>
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </section>
  );
}

コンポーネント単位のキャッシュも可能で、同じuserIdに対する呼び出しは即時レスポンスが返される。
これにより、重複フェッチの削減やUI再レンダリングの最適化が実現する。

サーバーアクションでキャッシュを更新する例

// app/actions.ts
"use server";

import { updateTag } from "next/cache";

export async function updateUserProfile(id: string, profile: any) {
  await db.users.update(id, profile);
  // キャッシュを即時更新
  updateTag(`user-${id}`);
}

Cache ComponentsとupdateTag()を組み合わせることで、ユーザー操作後もキャッシュを最新化できる。
この「read-your-writes」動作により、キャッシュ利用時でもUIが古い状態を表示しないように制御できる。

Next.js Devtools MCP — AI連携によるデバッグ強化

Next.js 16では、Next.js DevTools MCP（Model Context Protocol）が導入された。
AIエージェントがNext.jsの内部構造（ルーティング、キャッシュ、レンダリング挙動など）を理解し、開発者にコンテキスト付きの支援を提供する。

MCP連携により、AIは次の情報を自動で取得できる。

ルーティングやキャッシュの構造
ブラウザ・サーバーの統合ログ
スタックトレースの自動取得
現在のページコンテキスト

これにより、AIがデバッグ内容を解説したり、修正提案を行うなど、インテリジェントな開発支援が可能になる。

proxy.ts — ネットワーク境界の明確化

Next.js 16では、従来のmiddleware.tsが**proxy.ts**に置き換えられた。
これにより、アプリケーションのネットワーク境界が明示され、Node.jsランタイムで統一的に動作する。

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

この変更により、middleware.tsは将来的に削除される見込みだ。
Edgeランタイム専用のユースケースを除き、今後はproxy.tsを使用することが推奨される。

ログ出力の改善

開発時・ビルド時のログが再設計され、処理時間が視覚的に把握できるようになった。

出力例：

▲ Next.js 16 (Turbopack)
✓ Compiled successfully in 615ms
✓ Finished TypeScript in 1114ms
✓ Collecting page data in 208ms
✓ Generating static pages in 239ms
✓ Finalizing page optimization in 5ms

これにより、ビルドパイプライン内のボトルネック特定が容易になった。

Turbopackと開発者体験（DX）の向上

Next.js 16では、Turbopackが正式に安定版として採用され、すべての新規アプリでデフォルトのバンドラーとなった。
これにより、従来のwebpack比でビルド最大5倍、Fast Refresh最大10倍の高速化を実現している。

また、ファイルシステムキャッシュ（β版）を導入し、大規模リポジトリでの開発体験をさらに改善。
再起動後の再コンパイルも劇的に速くなった。

さらに、create-next-appも刷新され、TypeScript・Tailwind CSS・App Routerが標準構成となった。

React Compilerとルーティング最適化

React Compilerが正式サポートされ、コンポーネントの自動メモ化が可能になった。
また、ルーティングシステムはレイアウトの重複除去（Layout Deduplication）とインクリメンタルプリフェッチを採用し、リンク先データの効率的な読み込みを実現している。

改良されたキャッシュAPI

Next.js 16ではrevalidateTag()とupdateTag()が刷新された。

import { revalidateTag } from "next/cache";
revalidateTag("blog-posts", "max"); // SWR対応の再検証

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

export async function updateUserProfile(id: string, profile: any) {
  await db.users.update(id, profile);
  updateTag(`user-${id}`);
}

また、refresh() APIも新設され、非キャッシュデータのみに限定した再読み込みが可能となった。

React 19.2対応

Next.js 16はReact 19.2を採用し、以下の新機能をサポートしている。

View Transitions：ページ遷移時の滑らかなアニメーション
**useEffectEvent()**：副作用内ロジックの再利用
Activityコンポーネント：非表示状態でも状態を維持するバックグラウンド描画

破壊的変更と非推奨項目

Node.js 20.9以上、TypeScript 5.1以上が必須。
AMPサポート、next lintコマンドが削除。
middleware.ts、experimental.ppr等の設定項目が削除。
Sass Loaderがv16へ更新され、モダン構文をサポート。

アップグレード方法

# 自動アップグレード
npx @next/codemod@canary upgrade latest

# 手動アップグレード
npm install next@latest react@latest react-dom@latest

# 新規プロジェクト作成
npx create-next-app@latest

codemodが完全に対応できない場合は、アップグレードガイドを参照する必要がある。

詳細はNext.js 16を参照していただきたい。