● Next.js 14 → 15 へのアップグレード時に考慮すべきことをまとめました（ with AI ）

Next.js 15.x 完全変更点まとめ

Next.js 14からNext.js 15への移行を検討している方向けに、Next.js 15.xの全バージョンの変更点を網羅的にまとめました。

📋 概要

リリース日程

• Next.js 15.0: 2024年10月21日（安定版）
• Next.js 15.1: 2024年12月10日
• Next.js 15.2: 2025年2月26日
• Next.js 15.3: 2025年4月9日
• Next.js 15.4: 2025年7月14日
• Next.js 15.5: 2025年8月18日

---

🔧 Next.js 15.0（メジャーリリース）

主要な変更点

React 19 サポート

• App RouterでReact 19 RCをサポート
• Pages RouterでReact 18との後方互換性を維持
• React Compilerの実験的サポート追加

破壊的変更（Breaking Changes）

1. 非同期リクエストAPI

cookies()、headers()、params が非同期化

// Before
const cookieStore = cookies()
const token = cookieStore.get('token')

// After
const cookieStore = await cookies()
const token = cookieStore.get('token')

2. キャッシュセマンティクスの変更

fetch リクエスト、GET Route Handler、クライアントナビゲーションがデフォルトでキャッシュされない

3. その他の破壊的変更

• NextRequestのgeoとipプロパティが削除
• @next/font パッケージが削除（next/fontに統合）
• Speed Insightsの自動計測が削除

新機能

Turbopack（開発環境で安定版）

開発環境でのTurbopackが安定版としてリリース

after() API（安定版）

レスポンス完了後にタスクを実行するAPIが安定版に

import { after } from 'next/server'

export default function Layout({ children }) {
  after(() => {
    // ログ記録、分析などの二次的タスク
    log()
  })
  return children
}

Static Route Indicator

開発中にルートが静的か動的かを視覚的に表示

その他の機能

• React Compilerの実験的サポート
• onRequestError フックによる改善されたエラー監視
• ハイドレーションエラーメッセージの改善

アップグレード方法

# 自動アップグレードCLI
npx @next/codemod@canary upgrade latest

# 手動アップグレード
npm install next@latest react@rc react-dom@rc

---

🔧 Next.js 15.1

主要な変更点

React 19（安定版）サポート

Pages RouterとApp Routerの両方でReact 19の安定版をサポート

after() API の安定化

セルフホストNext.jsサーバーのサポート改善、Server ActionsとRoute Handlersでの runtime API サポート

エラーデバッグの改善

ソースマップの改善、ignoreListプロパティの実装によりアプリケーションコードに焦点を当てた表示

実験的認証API

unauthorized と forbidden API の実験的サポート追加

import { unauthorized } from 'next/server'

export function GET() {
  const user = getUser()
  if (!user) {
    unauthorized()
  }
  return Response.json({ user })
}

---

🔧 Next.js 15.2

主要な変更点

メタデータ生成の改善

generateMetadata完了前に初期UIを送信可能に（ボットは除く）

Turbopackのパフォーマンス向上

最大57.6%のコンパイル時間短縮、30%のメモリ使用量削減

エラーオーバーレイのUI刷新

新デザインのエラーメッセージ、React owner stacksによる高精度エラー報告

実験的Node.js Middleware

Middlewareでの Node.js ランタイムサポート（実験的）

その他の機能

• 開発サーバーでの統合デバッガ情報表示
• React View Transitions APIの実験的サポート
• create-next-appに--api フラグ追加

---

🔧 Next.js 15.3

主要な変更点

Turbopack for builds（アルファ版）

99.3%の統合テストが通る本番ビルドでのTurbopackサポート

パフォーマンス向上 CPUコア数に応じたスケールアップ: 4コア28%、16コア60%、30コア83%高速化

next build --turbopack

Turbopack設定の変更

experimental.turbo から turbopack キーに移動

const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

クライアント計測フック

instrumentation-client.js|ts でフロントエンドコード実行前の監視設定が可能

ナビゲーションフック

onNavigate と useLinkStatus の追加

// onNavigate
<Link href="/page" onNavigate={(url) => {
  console.log('Navigating to:', url)
}}>
  Link
</Link>

// useLinkStatus
function MyComponent() {
  const { pending } = useLinkStatus()
  return <div>{pending ? 'Loading...' : 'Ready'}</div>
}

TypeScript プラグインの改善

大規模コードベースでの60%のレスポンス時間改善、フリーズやクラッシュの解消

Rspackの実験的サポート

96%のテストが通るWebpack互換バンドラーnext-rspackのコミュニティサポート

---

🔧 Next.js 15.4

主要な変更点

Turbopack builds の統合テスト100%達成

next build --turbopack が8298の統合テスト全てをパス、vercel.comで実戦投入

Next.js 16のプレビュー機能

Node.js Middleware（安定版）、Deployment Adapters（アルファ版）の準備

キャッシュコンポーネント（ベータ版）

Dynamic IO、use cache、Partial Prerenderingを統合した cacheComponents フラグ

非推奨化

Node.js 18サポート、AMPサポート、一部のnext/image APIが非推奨化

---

🔧 Next.js 15.5

主要な変更点

Turbopack builds（ベータ版）

本番ビルドでのTurbopackがベータ版に昇格、vercel.com、v0.app、nextjs.orgで実戦投入

パフォーマンス結果 顧客サイト: 4コアマシンで2倍、14コアマシンで2.2倍高速化

Node.js Middleware（安定版）

15.2で実験的だったNode.jsランタイムサポートが安定版に

export const config = {
  runtime: 'nodejs', // Now stable!
}

TypeScriptの大幅改善

型付きルート（安定版）

TurbopackでのフルType Safetyとコンパイル時のリンクチェック

const nextConfig = {
  typedRoutes: true, // Now stable!
}

Route Props Helpers

PageProps、LayoutProps、RouteContextの自動生成

// Before: Manual typing
interface Props {
  params: Promise<{ slug: string }>
  children: React.ReactNode
}

// After: Automatic typing
export default function Layout(props: LayoutProps<'/dashboard'>) {
  return <div>{props.children}</div>
}

next typegen コマンド

next dev/build なしでの型生成が可能

next typegen && tsc --noEmit

next lint の非推奨化

Next.js 16でnext lintが削除、ESLintやBiomeへの移行推奨

# Migration codemod
npx @next/codemod@latest next-lint-to-eslint-cli .

Next.js 16向け非推奨警告

legacyBehavior、AMP、next/image設定の非推奨警告追加

---

🚨 破壊的変更の詳細

1. 非同期Request API

すべての request-specific API が非同期化されました：

// Next.js 14
export async function generateMetadata({ params }) {
  const slug = params.slug // 同期
  return { title: slug }
}

// Next.js 15
export async function generateMetadata({ params }) {
  const slug = (await params).slug // 非同期
  return { title: slug }
}

2. キャッシュング変更

デフォルトでキャッシュされなくなった項目：

• fetch() リクエスト
• GET Route Handlers
• Client Router Cache

オプトインでキャッシュする方法：

// fetch with cache
fetch('/api/data', { cache: 'force-cache' })

// Route Handler with cache
export const dynamic = 'force-static'

// Client cache with staleTimes
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

3. 削除されたAPI

• NextRequest.geo
• NextRequest.ip
• @next/font パッケージ
• Speed Insights自動計測

---

🛠️ 移行ガイド

1. 自動移行ツール

npx @next/codemod@canary upgrade latest

2. 手動移行手順

依存関係の更新

npm install next@latest react@latest react-dom@latest
npm install @types/react@latest @types/react-dom@latest

非同期APIの対応

// Use the provided codemod or update manually
import { cookies } from 'next/headers'

export async function MyComponent() {
  const cookieStore = await cookies()
  const token = cookieStore.get('token')
  return <div>{token}</div>
}

キャッシュの明示的設定

// Force caching where needed
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

3. 段階的移行戦略

1. Phase 1: Next.js 15.x + React 18（Pages Router）
2. Phase 2: React 19への移行
3. Phase 3: App Routerの本格採用
4. Phase 4: Turbopackの導入検討

---

🎯 推奨アップグレード戦略

小規模プロジェクト

1. 自動移行ツール実行
2. テスト実行
3. 本番デプロイ

大規模プロジェクト

1. 開発環境での検証
2. 非同期API対応の段階的実装
3. キャッシュ戦略の見直し
4. パフォーマンステスト
5. 段階的本番ロールアウト

注意点

• React 19はまだ新しいため、エコシステムの対応状況を確認
• Turbopackは15.5でベータ版、本番利用は慎重に検討
• 大幅なキャッシュ変更により、パフォーマンス特性が変わる可能性

---

📊 パフォーマンス改善

Turbopack

• 開発時間: 最大57.6%短縮
• メモリ使用量: 30%削減
• ビルド時間: CPUコア数に応じて28-83%高速化

その他の改善

• TypeScript LSPの60%高速化
• 静的生成の高速化
• ソースマップの精度向上

---

🔮 今後の展望（Next.js 16）

予定されている主要変更：

• Node.js Middleware がデフォルト
• AMP サポート完全削除
• next lint 削除
• Turbopack 本番ビルド安定化
• より強化されたキャッシングシステム

---

この資料を参考に、プロジェクトの要件に応じてNext.js 15への移行計画を立てることをお勧めします。特に非同期APIとキャッシュの変更は影響が大きいため、十分なテストを行ってください。