【Next.js 16】新機能・変更点と移行の注意点まとめ

【Next.js 16 正式リリース】新機能・変更点と移行の注意点まとめ

2025年10月21日、ついに Next.js 16 が正式リリースされました
今回のアップデートは、開発者体験 (DX) の向上、キャッシュ戦略の抜本的な見直し、そしてアーキテクチャの明確化（Proxyの導入など）が含まれる大型アップデートとなっています。

本記事では、Next.js 16の目玉機能、v15との違い、そしてアップデート時の注意点をわかりやすく解説します。

🚀 Next.js 16 の主な新機能

1. Cache Components (use cache ディレクティブ)

これまで複雑だったキャッシュ戦略が、より直感的になりました。
use cache ディレクティブを使用することで、ページ、コンポーネント、関数単位で明示的にキャッシュを制御できます。

• Opt-in Caching: v15以前の「デフォルトでキャッシュ」から、完全に「オプトイン（明示的に有効化）」へシフトしました。動的なコードはデフォルトでリクエストごとに実行されます。
• PPR (Partial Prerendering) の完成形: 以前の experimental.ppr は廃止され、この Cache Components モデルに統合されました。

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

2. middleware.ts から proxy.ts へ

長らく使用されてきた middleware.ts が proxy.ts に置き換わります。
これは単なる名称変更ではなく、ネットワークの境界を明確にし、Node.js ランタイムで動作することを明示するためです。

• 変更点: ファイル名を proxy.ts に変更し、関数名を proxy にするだけですが、ロジックはそのまま移行可能です。
• 注意: middleware.ts もまだ動作しますが非推奨（Deprecated）となり、将来的に削除されます。

// proxy.ts
import { NextRequest, NextResponse } from 'next/server';

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

3. Turbopack がデフォルトに

Next.js 16から、新規プロジェクトおよび next dev / next build のデフォルトバンドラーが Turbopack になりました。

• プロダクションビルド: 2〜5倍高速化
• Fast Refresh: 最大10倍高速化
• File System Caching (Beta): 開発中のビルド結果をディスクにキャッシュし、再起動後の立ち上がりを爆速にする機能も追加されています。

4. Server Actions 向けの新しいキャッシュAPI

インタラクティブな操作を即座に反映させるための新しいAPIが追加されました。

• updateTag(tag): 「Read-your-writes」を実現。データを更新した後、即座に新しいデータを取得して画面に反映させます（キャッシュを破棄しつつ即時再取得）。
• refresh(): キャッシュされていないデータ（通知カウントなど）だけをリフレッシュします。

🔄 v15 との大きな違い

機能	Next.js 15	Next.js 16
キャッシュ挙動	デフォルトでキャッシュされるケースが多かった（fetchなど）	完全オプトイン（use cache を使用）。デフォルトは動的レンダリング。
ミドルウェア	middleware.ts (Edge/Node)	proxy.ts (Node.js ランタイム推奨)
PPR	experimental.ppr	Cache Components に統合
バンドラー	Webpack (Turbopackはopt-in)	Turbopack がデフォルト
同期API	警告付きで使用可能だったものも	params, cookies(), headers() などの同期アクセスは完全廃止

⚠️ アップデート時の注意点・Breaking Changes

v16へのアップデート時には、以下の点に修正が必要です。

1. 非同期APIへの完全移行

v15で警告が出ていた同期的なアクセス（params, searchParams, cookies(), headers()）が、v16では完全に削除されました。必ず await を使用する必要があります。

// ❌ v15以前 (v16ではエラー)
const cookieStore = cookies();
const id = params.id;

// ✅ v16
const cookieStore = await cookies();
const { id } = await params;

2. revalidateTag のシグネチャ変更

Stale-While-Revalidate (SWR) 挙動を有効にする場合、第2引数に cacheLife プロファイル（またはオブジェクト）が必須になりました。

import { revalidateTag } from 'next/cache';

// ❌ Deprecated
revalidateTag('blog-posts');

// ✅ 推奨
revalidateTag('blog-posts', 'max'); // または 'hours', 'days' など

3. next lint の挙動変更

next build 実行時に next lint が自動実行されなくなりました。CI/CDパイプラインで明示的にリンターを実行するように修正が必要です。また、ESLint v10 (Flat Config) がデフォルトになっています。

4. Node.js バージョン

最小要件が Node.js 20.9.0 (LTS) に引き上げられました。Node.js 18系はサポート対象外です。

5. Parallel Routes

default.js の設置が必須になりました。これがないとビルドエラーになります。

🛠️ その他便利機能・改善点

• create-next-app の簡素化: セットアップフローが整理され、より素早くプロジェクトを開始できるようになりました。
• ビルドログの改善: コンパイルとレンダリングにそれぞれどれくらいの時間がかかったかが詳細に表示されるようになりました。
• React 19.2 サポート: View Transitions や useEffectEvent など、最新のReact機能が利用可能です。

📝 まとめ

Next.js 16は、これまでの「キャッシュが分かりにくい」という課題に対して「明示的なキャッシュ (use cache)」という回答を出した重要なアップデートです。また、Turbopackのデフォルト化により、開発体験も大きく向上しています。

移行の際は、特に 非同期APIへの書き換え と proxy.ts への移行 を計画的に進めましょう

参考リンク

• Next.js 16 Blog Post
• Next.js Upgrade Guide