Next.js 16

戻る: Blog — 2025年10月21日（火）

投稿者: Jimmy Lai @feedthejim、Josh Story @joshcstory、Sebastian Markbåge @sebmarkbage、Tim Neutkens @timneutkens

次回の Next.js Conf 2025 を控え、Next.js 16 を公開しました。本リリースは Turbopack、キャッシュ、Next.js のアーキテクチャに対する最新の改善を提供します。

前回のベータ以降、以下の新機能と改善を追加しました:

• Cache Components: Partial Pre-Rendering (PPR) を用いる新しいモデルと use cache による即時ナビゲーションのためのキャッシュ。
• Next.js Devtools MCP: デバッグとワークフロー改善のための Model Context Protocol 統合。
• Proxy: ネットワーク境界を明確化するために middleware を proxy.ts に置き換え。
• DX: ビルドと開発リクエストのログ改善。

なお、これらの機能は前回のベータリリースですでに利用可能でした:

• Turbopack (stable): 既定のバンドラ。Fast Refresh が最大5〜10倍高速化、ビルドは2〜5倍高速化。
• Turbopack File System Caching (beta): 大規模アプリの起動とコンパイルがさらに高速化。
• React Compiler Support (stable): 自動メモ化の組み込み統合。
• Build Adapters API (alpha): ビルドプロセスを変更するカスタムアダプタの作成。
• Enhanced Routing: レイアウト重複排除と増分プリフェッチで最適化されたナビゲーションとプリフェッチ。
• Improved Caching APIs: 新しい updateTag() と改良された revalidateTag()。
• React 19.2: View Transitions、useEffectEvent()、<Activity/>。
• Breaking Changes: Async params、next/image のデフォルトなど。

---

Next.js 16 へのアップグレード

ターミナル

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

# …または手動でアップグレード
npm install next@latest react@latest react-dom@latest

# …または新しいプロジェクトを開始
npx create-next-app@latest

codemod がコードを完全に移行できない場合は、アップグレードガイドを参照してください。

---

新機能と改善

Cache Components

Cache Components は、Next.js におけるキャッシュをより明示的かつ柔軟にするための一連の機能です。use cache ディレクティブを中心に構成され、ページ、コンポーネント、関数をキャッシュでき、コンパイラが使用箇所ごとに自動的にキャッシュキーを生成します。

以前の App Router にあった暗黙的なキャッシュとは異なり、Cache Components のキャッシュは完全にオプトインです。デフォルトでは任意のページ、レイアウト、API ルート内の動的コードはリクエスト時に実行され、フルスタックアプリケーションフレームワークとして開発者の期待に沿ったデフォルト体験を提供します。

Cache Components は 2023 年に導入された Partial Prerendering (PPR) の流れを完結させます。PPR により、静的レンダリングと動的レンダリングの二者択一がなくなり、Suspense を介して静的ページの一部を動的にレンダリングすることが可能になりました。

next.config.ts で Cache Components を有効化できます:

const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

Next.js Conf 2025（10月22日）で Cache Components の詳細と利用方法を紹介します。今後数週間でブログとドキュメントでも追加情報を公開予定です。

注: ベータで発表されていた experimental.ppr フラグと関連設定は Cache Components 設定に統合され、削除されています。ドキュメントを参照してください。

Next.js Devtools MCP

Next.js 16 は Next.js DevTools MCP（Model Context Protocol 統合）を導入します。これはアプリのコンテキスト情報を用いた AI 支援デバッグ向けの機能です。

Next.js DevTools MCP が AI エージェントに提供するもの:

• Next.js の知識: ルーティング、キャッシュ、レンダリング動作。
• 統一ログ: ブラウザとサーバのログを切り替え不要で確認。
• 自動エラー参照: スタックトレースを手動でコピーする必要なし。
• ページ認識: アクティブルートのコンテキスト理解。

これにより AI エージェントは問題診断、動作説明、修正案の提示を開発ワークフロー内で行えるようになります。詳細はドキュメントを参照してください。

proxy.ts（旧 middleware.ts）

proxy.ts は middleware.ts に代わり、アプリのネットワーク境界を明確にします。proxy.ts は Node.js ランタイム上で実行されます。

やること:

• middleware.ts を proxy.ts にリネーム
• エクスポートする関数名を proxy にリネーム
• ロジック自体はそのまま

理由: リクエストのインターセプトに対して名称が明確になり、実行ランタイムが一つに定まるため予測しやすくなります。

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

注: middleware.ts は Edge ランタイム用途でまだ利用可能ですが非推奨であり、将来のバージョンで削除されます。ドキュメントを参照してください。

ログの改善

Next.js 16 では開発時のリクエストログが拡張され、どこに時間が使われているかが分かるようになりました:

• Compile: ルーティングとコンパイル
• Render: 実行されるコードと React のレンダリング

ビルド出力も各ステップにかかった時間を表示するよう拡張されました。例:

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

---

以下はベータで既に発表していた機能です

開発者体験

Turbopack (stable)

Turbopack は開発・本番ビルドの両方で安定化し、すべての新しい Next.js プロジェクトの既定バンドラになりました。ベータ以降の採用は急速に進み、Next.js 15.3+ の開発セッションの50%超、プロダクションビルドの20%が Turbopack を使用しています。期待できる改善:

• 本番ビルドが 2–5× 速くなる
• Fast Refresh が最大 10× 速くなる

カスタム webpack 設定のアプリは引き続き webpack を使えます:

next dev --webpack
next build --webpack

Turbopack File System Caching (beta)

Turbopack は開発時にファイルシステムキャッシュをサポートし、コンパイラのアーティファクトをディスクに保持して再起動間で高速なコンパイルを実現します。設定で有効化できます:

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
export default nextConfig;

Vercel の内部アプリは既にこの機能を使用しており、大規模リポジトリで生産性の向上が確認されています。フィードバックをお寄せください。

create-next-app の簡素化

create-next-app はセットアップフローの簡素化、プロジェクト構造の更新、デフォルトの改善を行いました。新テンプレートは App Router をデフォルトで採用し、TypeScript 優先設定、Tailwind CSS、ESLint を含みます。

Build Adapters API (alpha)

Build Adapters RFC に従い、コミュニティおよびデプロイプラットフォームと協力して Build Adapters API の初期アルファ版を提供します。Build Adapters により、ビルドプロセスにフックするカスタムアダプタを作成でき、デプロイプラットフォームやカスタムビルド統合が Next.js 設定やビルド出力を変更できます。

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};
module.exports = nextConfig;

RFC のディスカッションでフィードバックを共有してください。

React Compiler Support (stable)

React Compiler の 1.0 リリースに伴い、Next.js 16 での組み込みサポートが安定化しました。React Compiler はコンポーネントを自動的にメモ化し、手作業の変更なしに不要な再レンダリングを削減します。

reactCompiler オプションは experimental から stable に昇格しましたが、デフォルトでは有効化されていません。さまざまなアプリ種別でビルドパフォーマンスデータを収集中のためです。React Compiler は Babel に依存するため、これを有効にすると開発やビルドでのコンパイル時間が長くなる可能性があります。

const nextConfig = {
  reactCompiler: true,
};
export default nextConfig;

React Compiler プラグインを最新版でインストールしてください:

npm install babel-plugin-react-compiler@latest

---

コア機能とアーキテクチャ

強化されたルーティングとナビゲーション

Next.js 16 はルーティングとナビゲーションシステムを全面的に見直し、ページ遷移をより軽量かつ高速にしています。

• レイアウト重複排除: 共有レイアウトを持つ複数の URL をプリフェッチする際に、レイアウトは一度だけダウンロードされます（例: 50 件の製品リンクがあるページで、共有レイアウトが 50 回ではなく 1 回のみダウンロードされる）。
• 増分プリフェッチ: Next.js はキャッシュにない部分のみをプリフェッチします。プリフェッチキャッシュは以下を行います:
  • ビューポートを離れたリンクのリクエストをキャンセル
  • ホバー時や再入場時にプリフェッチの優先度を上げる
  • データが無効化された際に再プリフェッチ
  • Cache Components 等の将来機能とシームレスに連携

トレードオフ: 個々のプリフェッチリクエスト数は増える可能性がありますが、総データ転送量は大幅に小さくなります。ほとんどのアプリにとってこのトレードオフが最適だと考えています。リクエスト数の増加が問題を引き起こす場合はお知らせください。より効率的にデータチャンクをインライン化する追加最適化に取り組んでいます。

これらの変更はコード修正を必要とせず、すべてのアプリのパフォーマンス向上を目的としています。

改良されたキャッシュ API

Next.js 16 はキャッシュ動作をより明示的に制御できるようにキャッシュ API を改良しました。

revalidateTag()（更新）

revalidateTag() は stale-while-revalidate (SWR) を有効にするために、第2引数に cacheLife プロファイルが必須になりました:

import { revalidateTag } from 'next/cache';

// ✅ 組み込み cacheLife プロファイルを使用（ほとんどのケースで 'max' を推奨）
revalidateTag('blog-posts', 'max');

// 他の組み込みプロファイル例
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// またはカスタムの再検証時間を持つインラインオブジェクト
revalidateTag('products', { expire: 3600 });

// ⚠️ 廃止予定 - 引数1つの形式
revalidateTag('blog-posts');

プロファイル引数は組み込みの cacheLife プロファイル名（'max', 'hours', 'days' など）または next.config 内で定義したカスタムプロファイルを受け取ります。インラインの { expire: number } オブジェクトも渡せます。長期コンテンツのバックグラウンド再検証を有効にするため、ほとんどのケースで 'max' を推奨します。

タグ付きコンテンツを要求すると、ユーザーは即座にキャッシュされたデータを受け取り、Next.js がバックグラウンドで再検証を行います。revalidateTag() は、SWR 振る舞いで、適切にタグ付けされたキャッシュエントリのみを無効化したい場合に使用してください。静的コンテンツで最終的一貫性を許容できるケースに最適です。

移行ガイダンス: SWR 挙動が必要な場合は第2引数に cacheLife プロファイル（推奨: 'max'）を追加するか、Server Actions 内で読み取り後すぐに反映したい場合は updateTag() を使用してください。

updateTag()（新規）

updateTag() は Server Actions 専用の新 API で、read-your-writes（読み書き直後に反映される）セマンティクスを提供します。同一リクエスト内でキャッシュを失効させ、即座に新しいデータを読み出せます:

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

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  // キャッシュを失効させて即座に更新 - ユーザーは変更をすぐに確認できる
  updateTag(`user-${userId}`);
}

これによりフォームやユーザー設定などのインタラクティブな機能で変更が即時に反映されます。

---

今後も Next.js Conf 2025 での発表や公式ドキュメント、ブログ投稿で追加情報を随時公開していきます。フィードバックや問題報告はぜひお寄せください。