Next.js 15の新機能とアップグレード手順：プロジェクト移行ガイド

Next.js 15が正式リリースされました。React 19の安定版をベースに、Partial Prerendering（PPR）の安定化、新しいキャッシュ戦略、ターボパックの本格対応など、フロントエンド開発の常識を変えるアップデートが多数含まれています。

本記事では、Next.js 15の主要な新機能を解説し、14からのアップグレード手順を実践的に紹介します。

1. 主な新機能と変更点

React 19のネイティブ対応

Next.js 15はReact 19に完全対応。Server Componentsが安定版となり、新しいフック群（use()、useOptimistic()など）がApp Router上でそのまま使用可能です。Action系フックのパフォーマンスも改善され、サーバーアクションの呼び出しがより効率的になりました。

Partial Prerendering（PPR）が安定版に

実験的機能だったPPRが安定化。同じページ内で動的部分と静的パーツをハイブリッドにレンダリングできます。ブログやECサイトで、ユーザー固有の情報は動的、共通のコンテンツは静的という構成が容易になり、LCPやFCPの改善に直結します。

ターボパック（Turbopack）のデフォルト化

開発サーバーのビルドエンジンがターボパックに統合。Next.js 14まではデフォルトがwebpackでしたが、15からは新規プロジェクトのnext devでターボパックが標準で有効になります。HMRの速度が大幅に向上し、大規模プロジェクトでその効果を実感できます。

2. アップグレード手順

ステップ1: 依存パッケージの更新

プロジェクトルートで以下のコマンドを実行します。

npm install next@15 react@19 react-dom@19

ステップ2: 非推奨APIの置き換え

Next.js 14でnext.config.jsに記述していた一部のオプションが変更されました。特に注意すべきはキャッシュ設定の見直しです。staleTimesオプションが拡張され、より細かいキャッシュ制御が可能になっています。

- experimental: { scrollRestoration: true }
+ experimental: { scrollRestoration: true }
+ // ※15では基本機能として統合済みのため、多くの実験的フラグが不要に

ステップ3: `@next/font`から`next/font`への完全移行

まだ@next/fontパッケージを利用している場合は、ビルトインのnext/fontに移行します。

npm uninstall @next/font

コード上のインポートもnext/fontに書き換えてください。

3. キャッシュ戦略の刷新

Next.js 15では、fetchのデフォルトキャッシュ動作がno-storeに変更されました。これにより、開発者の意図しないキャッシュ残留が減り、データの鮮度が保たれやすくなっています。動的データを取得する場合は明示的にcache: 'force-cache'を指定する必要があります。

// Next.js 15のデフォルト: キャッシュなし
const data = await fetch('https://api.example.com/data');

// キャッシュしたい場合は明示指定
const cachedData = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});