Next.js 16

claudejamodel: claude-sonnet-4-20250514

Next.js 16

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

公開日: 2025年10月21日（火）

来たる 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): 最大5-10倍高速な Fast Refresh と 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: 非同期パラメータ、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 ルートのすべての動的コードは、デフォルトでリクエスト時に実行され、フルスタックアプリケーションフレームワークから開発者が期待するものとより良く整合した、すぐに使える体験を Next.js に提供します。

Cache Components は、2023年に初めて導入された Partial Prerendering (PPR) の物語も完成させます。PPR 以前、Next.js は各 URL を静的または動的にレンダリングするかを選択する必要があり、中間地点はありませんでした。PPR はこの二分法を排除し、開発者が完全に静的なページの高速初期読み込みを犠牲にすることなく、静的ページの一部を（Suspense を介して）動的レンダリングにオプトインできるようにしました。

next.config.ts ファイルで Cache Components を有効にできます：

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

Cache Components とその使用方法について、10月22日の Next.js Conf 2025 でより詳しく共有し、今後数週間でブログとドキュメントでより多くのコンテンツを共有する予定です。

注意: ベータリリースで以前に発表されたように、以前の実験的な experimental.ppr フラグと設定オプションは、Cache Components 設定に置き換えられて削除されました。詳細はドキュメントをご覧ください。

Next.js Devtools MCP

Next.js 16 では、アプリケーションへの文脈的洞察を持つ AI 支援デバッグのための Model Context Protocol 統合である Next.js DevTools MCP を導入しています。

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 で実行されています。

Turbopack では以下が期待できます：

2-5倍高速なプロダクションビルド
最大10倍高速な Fast Refresh

設定不要で、すべての Next.js 開発者にこれらのパフォーマンス向上をもたらすため、Turbopack をデフォルトにしています。

カスタム 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 の組み込みサポートは、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 をプリフェッチする際、レイアウトは各 Link に対して個別にではなく、一度だけダウンロードされます。例えば、50個の製品リンクを持つページは、50回ではなく一度だけ共有レイアウトをダウンロードし、ネットワーク転送サイズを劇的に削減します。

インクリメンタルプリフェッチ: 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 });

// ⚠️ 非推奨 - 単一引数形式
revalidateTag('blog-posts');

profile 引数は、組み込み cacheLife プロファイル名（'max'、'hours'、'days' など）または next.config で定義されたカスタムプロファイルを受け入れます。インライン { expire: number } オブジェクトを渡すこともできます。

長期間のコンテンツのバックグラウンド再検証を有効にするため、ほとんどの場合 'max' の使用を推奨します。ユーザーがタグ付けされたコンテンツをリクエストすると、Next.js がバックグラウンドで再検証している間、キャッシュされたデータを即座に受け取ります。

stale-while-revalidate 動作で適切にタグ付けされたキャッシュエントリのみを無効化したい場合は revalidateTag() を使用します。これは最終的な一貫性を許容できる静的コンテンツに理想的です。

移行ガイダンス: SWR 動作のために cacheLife プロファイル（'max' を推奨）で第2引数を追加するか、read-your-writes セマンティクスが必要な場合は Server Actions で updateTag() を使用します。

updateTag()（新規）

updateTag() は、read-your-writes セマンティクスを提供する新しい Server Actions 専用 API で、同じリクエスト内でキャッシュを期限切れにして即座に新しいデータを読み取ります：

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

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  // キャッシュを期限切れにして即座に更新 - ユーザーは変更をすぐに確認
  updateTag(`user-${userId}`);
}

これにより、インタラクティブな機能が変更を即座に反映することが保証されます。フォーム、ユーザー設定に最適です。

要約

Summary

Key Points

新機能

安定版機能

アップグレード方法

破壊的変更

翻訳

Next.js 16

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

新機能と改善

Cache Components

Next.js Devtools MCP

proxy.ts（旧 middleware.ts）

ログの改善

以前にベータリリースで発表された機能

開発者体験

Turbopack（stable）

Turbopack File System Caching（beta）

簡素化された create-next-app

Build Adapters API（alpha）

React Compiler Support（stable）

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

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

改善されたキャッシュ API

revalidateTag()（更新）

updateTag()（新規）