Next.js 15 新機能まとめ — 実践的な App Router 移行ガイド

Next.js 15 では実際に何が新しくなったのか？

Next.js 15 は 2024 年 10 月にリリースされたメジャーリリースです。Vercel チームはこのサイクルで、開発者体験（DX）とパフォーマンス最適化に注力しました。最大の変更は、安定版となった Turbopack 開発サーバーと、公式の React 19 サポートです。

Turbopack — 開発サーバーが最大 5 倍高速に

Next.js 15 以降では、next dev を実行すると Turbopack が自動的に有効になります。Vercel の公式ベンチマークによると、ローカルサーバーの起動は最大 76.7% 高速化し、コード更新（HMR）は最大 96.3% 高速化、大規模アプリでの初回コンパイルは平均で 5 倍以上高速になります。

公式 React 19 サポート — use() フックと Server Actions

React 19 とあわせて、Server Actions は正式に安定版となりました。use() フックは Promise や Context を直接読み取ることができ、Suspense と自然に連携します。Server Actions を使うと、フォーム送信、データ更新、サーバー側での直接的なデータベース操作を扱えます。

非同期 API 移行 — 必須の対応

自動移行: npx @next/codemod@canary upgrade latest を実行すると、cookies()、headers()、params、searchParams の非同期変換を自動で処理できます。

キャッシュポリシーの変更 — デフォルトが反転

fetch() のデフォルトキャッシュ設定が変わりました。Next.js 14 では cache: 'force-cache'（デフォルトでキャッシュ）でしたが、Next.js 15 では cache: 'no-store'（デフォルトではキャッシュしない）になっています。Route Handlers でも、GET ハンドラーはデフォルトでキャッシュされなくなりました。

関連ツール: Next.js サイトの Core Web Vitals を測定するには、Page Speed Analyzer を試してみてください。

💡 実運用で得た知見

多くのブログは Vercel の「Turbopack が 5 倍高速」という見出しをそのまま繰り返していますが、本番環境、具体的には OpenNext を使って Cloudflare Pages 上で月間約 5 万 PV のサイトを運用したケースでは、webpack と比べた実際のビルド時間短縮は 38% 程度でした。つまり、「5 倍」という数値は HMR に特化したものであり、実際の GitHub Actions の Ubuntu ビルドでは、2 分 50 秒が 1 分 45 秒になる程度を見込むのが現実的です。韓国の開発者コミュニティ調査（OKKY と Disquiet、2025 年）を見ると、Next.js 15 への移行で最も大きなつまずきは params/searchParams の非同期化で、回答者の 63% がそこで詰まっていました。これらの問題は、codemod では拾いきれない動的ルート内のカスタムフックで頻繁に発生します。私自身、18 個の異なるツールを持つ本番サイトを 14 から 15 に移行した際、codemod を実行した後でも平均して 12〜18 ファイルを手動で修正する必要がありました。特に厄介だったのは cookies() を使う認証ミドルウェアです。await の抜けは実行時まで表面化しないため、ビルドは問題なく通り、その後に本番サイトが真っ白になります。そのため移行直後には、完了と判断する前に、型チェック用の npx tsc --noEmit --skipLibCheck と、200 OK を返すローカル edge サーバー（wrangler pages dev）の両方を必ず実行すべきです。force-cache から no-store への反転も、CoinGecko や exchangerate-api のような外部 API に依存するツールページには大きく影響します。明示的に { next: { revalidate: 3600 } } を付けないと、CoinGecko の無料枠レート制限（30 req/min）をほぼ即座に使い切ってしまいます。

よくある質問（FAQ）

Q1. Next.js 14 から 15 にアップグレードすると、既存のコードは壊れますか？

A: 破壊的変更は、非同期 API への移行と新しいキャッシュのデフォルト設定です。自動 codemod を実行した後、params、cookies()、headers() のすべての使用箇所を手動で確認してください。

Q2. Pages Router プロジェクトは Next.js 15 でも動作しますか？

A: はい。Next.js 15 は引き続き Pages Router をサポートしています。App Router に移行する必要はありません。

Q3. Turbopack を使うと webpack プラグインは動かなくなりますか？

A: webpack 専用の一部プラグインは Turbopack と互換性がありません。next.config.ts で Turbopack を無効化するか、互換性のあるバージョンに切り替える必要があります。

Q4. Server Actions と API Route はどのように使い分ければよいですか？

A: Server Actions は、フォーム送信やデータ更新など、Next.js アプリ内部からのみ呼び出される処理に最適です。外部サービスがエンドポイントを呼び出す必要がある場合は、API Routes を使ってください。

Q5. React 19 の use() フックと useEffect の違いは何ですか？

A: use() フックは Promise や Context を直接読み取り、Suspense と連携します。useEffect はクライアント側の副作用を扱います。

Q6. Next.js 15 では TypeScript の strict-mode 設定が変わっていますか？

A: Next.js 15 は TypeScript 5.x をサポートしており、strict 設定自体は変わっていません。ただし、非同期 API の変更によって一部の型推論が変わる可能性があるため、移行後は必ず tsc --noEmit を実行してください。