Next.js 16

Next.js Conf 2025 に先立ち、Next.js 16 がリリースされました。

このリリースでは、Turbopack、キャッシング（Caching）、および Next.js のアーキテクチャ に関する最新の改善が提供されています。
前回のベータ版リリース以降、以下の新機能と改善が追加されました。

新機能と改善点

• Cache Components（キャッシュコンポーネント）: Partial Pre-Rendering（PPR）と「use cache」を用いた新しいキャッシュモデルで、即時ナビゲーションを実現。
• Next.js Devtools MCP: Model Context Protocol（MCP）を統合し、デバッグやワークフローを改善。
• Proxy: middleware.ts を proxy.ts に置き換え、ネットワーク境界を明確化。
• DX: ビルドや開発リクエストにおけるログ出力を改善。

以前のベータ版から利用可能だった機能

• Turbopack（安定版）: すべてのアプリでデフォルトのバンドラとなり、Fast Refresh が最大 5〜10 倍、ビルドが最大 2〜5 倍高速化。
• Turbopack File System Caching（ベータ）: 大規模アプリの起動およびコンパイル時間をさらに短縮。
• React Compiler Support（安定版）: 自動メモ化のための組み込みサポート。
• Build Adapters API（アルファ版）: ビルドプロセスをカスタマイズできるアダプタを作成可能。
• ルーティング強化: レイアウトの重複除去と増分プリフェッチによるナビゲーションの最適化。
• キャッシュAPIの改善: 新しい updateTag() と改良された revalidateTag()。
• React 19.2: View Transitions、useEffectEvent()、<Activity /> などをサポート。
• 破壊的変更点: 非同期パラメータ、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" ディレクティブを中心に構成され、ページ・コンポーネント・関数をキャッシュでき、コンパイラによってキャッシュキーが自動生成されます。

従来の暗黙的なキャッシュとは異なり、Cache Components は完全にオプトイン方式です。
すべての動的コードはデフォルトでリクエスト時に実行され、より直感的なフルスタックフレームワーク体験を提供します。

また、2023年に導入された Partial Prerendering (PPR) を完成させる存在でもあります。
PPR以前は静的 or 動的の二択しかありませんでしたが、PPRは静的ページの一部を動的レンダリングにする柔軟性をもたらしました。

設定例:

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

PPR の experimental.ppr 設定は廃止され、Cache Components 設定に統合されています。
詳細はドキュメントをご覧ください。

Next.js Devtools MCP

Next.js 16 では Next.js Devtools MCP を導入。
AI支援デバッグのために Model Context Protocol (MCP) を統合し、アプリのコンテキストを理解した支援が可能になりました。

主な特徴:

• ルーティング・キャッシュ・レンダリングの知識を持つ
• ブラウザとサーバーのログを統合
• 自動エラー解析（スタックトレースの自動取得）
• ページのコンテキスト認識

これにより、AIエージェントがアプリの挙動を説明・修正提案できるようになります。

proxy.ts（旧 middleware.ts）

proxy.ts が middleware.ts を置き換え、アプリのネットワーク境界を明確化。
Node.js ランタイム上で実行されます。

対応方法:

• middleware.ts → proxy.ts にリネーム
• export 名を proxy に変更（ロジックは同じ）

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

Edge ランタイム用途での middleware.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

開発者体験 (DX)

Turbopack（安定版）

開発および本番ビルド両方で安定版となり、すべての新規プロジェクトでデフォルトバンドラに。

パフォーマンス向上:

• 本番ビルド: 最大 2〜5倍速
• Fast Refresh: 最大 10倍速

Webpackを使用したい場合は明示的に:

next dev --webpack
next build --webpack

Turbopack ファイルシステムキャッシュ（ベータ）

コンパイラ成果物をディスクに保存し、再起動後のコンパイルを大幅に高速化。

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

create-next-app の簡素化

新しいテンプレートには以下がデフォルトで含まれます：

• App Router
• TypeScript
• Tailwind CSS
• ESLint

Build Adapters API（アルファ）

ビルドプロセスをカスタマイズできる新API。
デプロイプラットフォームやカスタムビルド統合を可能にします。

React Compiler（安定版）

React Compiler の 1.0 リリースに伴い、Next.js でも安定化。
自動的にメモ化を行い、不要な再レンダリングを削減。

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

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

ルーティングとナビゲーションの強化

• レイアウトの重複除去：共通レイアウトが1回だけダウンロードされる
• 増分プリフェッチ：キャッシュされていない部分のみを再取得
• ホバー時や再表示時の優先プリフェッチ
• Cache Components との連携強化

キャッシュAPIの改良（Improved Caching APIs）

Next.js 16 では、キャッシュ動作をより明示的に制御できるようにするため、キャッシュAPIが改良されています。
これにより、開発者はキャッシュのライフサイクルをより細かく、かつ予測可能に扱えるようになりました。

revalidateTag()（更新）

revalidateTag() は、2つ目の引数に cacheLife プロファイルを指定する必要があるようになりました。
これにより、stale-while-revalidate (SWR) の動作が有効化されます。

import { revalidateTag } from 'next/cache';

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

// その他の組み込みプロファイルも利用可能
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// カスタム再検証時間を持つオブジェクトをインライン指定することも可能
revalidateTag('products', { revalidate: 3600 });

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

説明

• cacheLife 引数は、キャッシュ有効期間プロファイルを指定します。
• 以下の2種類の形式が利用可能です：

推奨設定

一般的なユースケースでは 'max' を推奨。
'max' は、バックグラウンド再検証を有効化し、長期間キャッシュが生きているコンテンツでも、
ユーザーがキャッシュ済みデータを即時受け取りつつ、Next.js がバックグラウンドで自動的に新データを取得します。

利用シーン

revalidateTag() は、「特定のタグが付与されたキャッシュエントリだけを」再検証したい場合に使用します。
特に、最終的な整合性を許容できる静的コンテンツに最適です（例：ブログ記事、ニュースフィードなど）。

移行ガイド

• 第2引数に cacheLife プロファイル（推奨 'max'）を追加してください。
• もし「即時反映（read-your-writes）」が必要な場合は、代わりに次の updateTag() を使用します。

updateTag()（新API）

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}`);
}

説明

• updateTag() を呼び出すと、該当タグに関連するキャッシュが即座に失効します。
• そして同じリクエスト中で最新データを再読み込みするため、ユーザーは更新直後に反映結果を確認できます。
• フォーム送信・ユーザー設定・インタラクティブUIなど、「更新後すぐにUIへ反映したい」シーンに最適です。

refresh()（新API）

refresh() は Server Actions 専用 の新しいAPIで、キャッシュを全く触らずに非キャッシュデータのみを更新します。
つまり、キャッシュ済みページシェルや静的コンテンツはそのまま維持されます。

'use server';

import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  // データベース上で通知を既読に更新
  await db.notifications.markAsRead(notificationId);

  // ヘッダー内の通知件数をリフレッシュ（キャッシュされていない別データ）
  refresh();
}

説明

• refresh() は キャッシュとは無関係に、未キャッシュデータを最新化します。
• キャッシュされたページ構造（shell）や静的要素は保持されるため、パフォーマンスを犠牲にしません。
• 主なユースケースは以下のようなリアルタイム更新系UIです：
  • 通知カウントの更新
  • ライブメトリクス表示
  • ステータスインジケーター更新

クライアント側との関係

refresh() はサーバー側専用APIですが、クライアント側の router.refresh() と連携可能です。
アクション完了後に非キャッシュ部分だけを効率的に更新できる設計です。

React 19.2 および Canary 機能

• View Transitions
• useEffectEvent

破壊的変更・削除・非推奨

バージョン要件

• Node.js 20.9+（LTS）
• TypeScript 5.1+
• 対応ブラウザ: Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

削除された機能

• AMPサポート削除
• next lint コマンド削除
• serverRuntimeConfig, publicRuntimeConfig → .env に統一
• experimental.ppr → Cache Components へ統合

デフォルト挙動の変更

• デフォルトバンドラ → Turbopack
• 画像キャッシュTTL → 4時間
• images.maximumRedirects → 最大3回
• ESLint設定 → Flat Config形式へ移行
• revalidateTag() → 第2引数必須
• 出力ディレクトリ分離（開発用とビルド用）
• parallel routes → default.js が必須化

非推奨機能（Deprecations）

以下の機能は Next.js 16 で非推奨（deprecated） となり、今後のバージョンで削除予定です。

その他の改善（Additional Improvements）

Next.js 16 では、開発体験や実行パフォーマンスを向上させるために、以下の追加改善が行われています。

パフォーマンス最適化

next dev および next start コマンドの起動速度・応答性が大幅に向上しました。
特に大規模アプリケーションにおけるホットリロードとビルド時間が短縮されています。

next.config.ts のネイティブ TypeScript サポート（Node.js）

Next.js 16 からは、Node.js のネイティブ TypeScript 実行を活用して
next.config.ts を直接 TypeScript で記述・実行できるようになりました。

以下のフラグを利用することで有効化できます：

next dev --experimental-next-config-strip-types
next build --experimental-next-config-strip-types
next start --experimental-next-config-strip-types

このフラグを付けると、Next.js は TypeScript 型定義を自動的に取り除き（strip）、
ネイティブで next.config.ts を実行できるようになります。

その他の改善

• next dev / next start のパフォーマンス最適化
• next.config.ts が Node.js ネイティブ TypeScript で実行可能に
• ロックファイル機構追加で複数インスタンスの同時起動を防止