Next.js 16 vs 15: 完全アップグレードガイド

Next.js 16は、フレームワークにとって最も重要なアップデートの一つです。Turbopackがデフォルトのバンドラーとなり、革新的なキャッシング戦略が導入されました。このガイドでは、Next.js 15から16へのアップグレードに必要なすべての情報を解説します。

クイックスタート

自動移行ツールを使用してNext.js 16にアップグレード：

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

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

# TypeScriptユーザー向け
npm install @types/react@latest @types/react-dom@latest

パフォーマンスのハイライト

• 本番ビルドが2〜5倍高速化 - Turbopackによる
• 開発時のFast Refreshが最大10倍高速化
• 共有レイアウトのネットワーク転送が50%削減
• Cache ComponentsとPPRによる即時ナビゲーション

主な変更点の概要

Turbopackがデフォルトに

これが最も影響の大きい変更です。Next.js 15では、Turbopackはオプションで明示的な設定が必要でした。現在はフラグなしでデフォルトのバンドラーとなっています。

以前（Next.js 15）

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack"
  }
}

現在（Next.js 16）

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Turbopack設定

experimental.turbopack設定がトップレベルオプションになりました：

import type { NextConfig } from 'next'

// Next.js 15 - experimental.turbopack
const nextConfig: NextConfig = {
  experimental: {
    turbopack: {
      // オプション
    },
  },
}

// Next.js 16 - トップレベルのturbopack
const nextConfig: NextConfig = {
  turbopack: {
    // オプション
  },
}

export default nextConfig

Turbopackのオプトアウト

Webpackを継続して使用する必要がある場合：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build --webpack",
    "start": "next start"
  }
}

破壊的変更

1. 非同期リクエストAPI（約95%のアプリに影響）

これが最大の破壊的変更です。Next.js 15では、params、searchParams、cookies()、headers()、draftMode()は値を直接返していました。Next.js 16では、Promiseを返します。

以前（Next.js 15）

export default function Page({ params, searchParams }) {
  const slug = params.slug
  const query = searchParams.q
  const cookieStore = cookies()
  return <div>{slug} - {query}</div>
}

現在（Next.js 16）

export default async function Page({ params, searchParams }) {
  const { slug } = await params
  const { q } = await searchParams
  const cookieStore = await cookies()
  return <div>{slug} - {q}</div>
}

codemodを使用して移行：

npx @next/codemod@canary upgrade latest

2. Node.js 20.9+が必須

Next.js 16はNode.js 20.9以降が必要です。Node.js 18はサポートされなくなりました。

# Nodeバージョンを確認
node --version

3. ミドルウェアがプロキシに名称変更

middleware.tsファイルがproxy.tsになりました：

# ミドルウェアファイルの名前を変更
mv middleware.ts proxy.ts

// 以前（Next.js 15）
export function middleware(request: Request) {}

// 現在（Next.js 16）
export function proxy(request: Request) {}

設定フラグも名称変更されました：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // 以前: skipMiddlewareUrlNormalize
  skipProxyUrlNormalize: true,
}

export default nextConfig

4. Imageコンポーネントの変更

いくつかのデフォルト値が変更されました：

• minimumCacheTTLのデフォルトが60秒から4時間（14400秒）に変更
• デフォルトのimageSizes配列から16が削除
• qualitiesのデフォルトが[75]のみに変更
• ローカルIP最適化がデフォルトでブロック

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  images: {
    // 必要に応じて以前の動作を復元
    minimumCacheTTL: 60,
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    qualities: [50, 75, 100],
    dangerouslyAllowLocalIP: true, // プライベートネットワーク専用
  },
}

export default nextConfig

新機能

"use cache"によるCache Components

Next.js 16では"use cache"ディレクティブによる明示的なキャッシングが導入されました：

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

export default nextConfig

'use cache'

async function MyComponent() {
  const data = await fetch('/api/users')
  return <div>{data}</div>
}

新しいキャッシングAPI

'use server'

import { revalidateTag, updateTag } from 'next/cache'

// revalidateTag - わずかな遅延が許容されるコンテンツ向け
export async function updateArticle(articleId: string) {
  revalidateTag(`article-${articleId}`, 'max')
}

// updateTag - 即時更新向け（read-your-writes）
export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile)
  updateTag(`user-${userId}`)
}

React 19.2統合

Next.js 16はReact 19.2を搭載しています：

• View Transitions: ナビゲーション中の要素アニメーション
• useEffectEvent: Effectから非リアクティブロジックを抽出
• Activity: 状態を維持しながらdisplay: noneでバックグラウンドUIをレンダリング

React Compiler（安定版）

React Compilerが安定版となり、コンポーネントを自動的にメモ化します：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: true,
}

export default nextConfig

npm install -D babel-plugin-react-compiler

強化されたルーティングとナビゲーション

• レイアウトの重複排除: 共有レイアウトは一度だけダウンロード
• インクリメンタルプリフェッチ: キャッシュにない部分のみプリフェッチ

パラレルルートの要件

すべてのパラレルルートスロットに明示的なdefault.jsファイルが必要になりました：

// app/@modal/default.tsx
import { notFound } from 'next/navigation'

export default function Default() {
  notFound()
}

// またはnullを返す
export default function Default() {
  return null
}

削除された機能

• AMPサポート: すべてのAMP APIと設定が削除
• next lintコマンド: ESLintを直接使用
• ランタイム設定: serverRuntimeConfigとpublicRuntimeConfigが削除
• next/legacy/image: next/imageを使用
• images.domains: images.remotePatternsを使用

ランタイム設定の移行

以前（Next.js 15）

// next.config.js
module.exports = {
  serverRuntimeConfig: {
    dbUrl: process.env.DATABASE_URL,
  },
  publicRuntimeConfig: {
    apiUrl: '/api',
  },
}

現在（Next.js 16）

// サーバー専用の値
async function fetchData() {
  const dbUrl = process.env.DATABASE_URL
  return await db.query(dbUrl, 'SELECT * FROM users')
}

// クライアントアクセス可能な値にはNEXT_PUBLIC_プレフィックスを使用
// .env.local
// NEXT_PUBLIC_API_URL="/api"

'use client'
export default function ClientComponent() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL
  return <p>API URL: {apiUrl}</p>
}

移行チェックリスト

1. ✅ アップグレード用の新しいブランチを作成
2. ✅ Node.jsを20.9+に更新
3. ✅ codemodを実行: npx @next/codemod@canary upgrade latest
4. ✅ すべての非同期API使用を更新（params、searchParams、cookies、headers）
5. ✅ middleware.tsをproxy.tsに名前変更
6. ✅ Turbopack設定をトップレベルに更新
7. ✅ パラレルルートにdefault.jsファイルを追加
8. ✅ 画像設定を確認・更新
9. ✅ 非推奨機能を削除（AMP、ランタイム設定）
10. ✅ 本番環境にデプロイする前にステージングで十分にテスト

まとめ

Next.js 16は、大幅なパフォーマンス改善と、より明示的なキャッシングアプローチをもたらします。注意が必要な破壊的変更がありますが、自動化されたcodemodがほとんどの移行作業を処理します。Turbopackだけでも、ほとんどのプロジェクトでアップグレードする価値があります。

"

「未来を予測する最良の方法は、それを創造することです。」 - ピーター・ドラッカー

今日から移行を始めて、より高速なビルド、より良い開発者体験、そしてアプリケーションのキャッシング動作に対するより多くの制御を楽しみましょう！