Next.js 15→16移行をしたので対応したことまとめ

AI Assisted
この記事は筆者の実装経験をもとに実装コードをベースで執筆し、AIによる校閲・推敲を経て公開しています。

実際に当サイト（nero15.dev）を Next.js 15.1.0 から 16.1.0 にアップグレードしました。 React 19 へのメジャーアップデートも含まれており、いくつかの破壊的変更に対応する必要がありましたが、作業自体は約30分で完了しました。

実際に行った作業手順と、予期せぬエラー（500エラーなど）の解決策をまとめます。

移行の概要

修正スコープ: 設定ファイル中心に約6ファイル

---

1. パッケージ更新

まずは依存関係を最新にします。React 19系への更新が含まれます。

package.json の変更

  "dependencies": {
-   "next": "^15.1.0",
-   "react": "^18.3.1",
-   "react-dom": "^18.3.1"
+   "next": "^16.1.0",
+   "react": "^19.2.0",
+   "react-dom": "^19.2.0"
  },
  "devDependencies": {
-   "@types/react": "^18.3.17",
-   "@types/react-dom": "^18.3.5",
-   "eslint-config-next": "^15.1.0"
+   "@types/react": "^19.1.0",
+   "@types/react-dom": "^19.1.0",
+   "eslint-config-next": "^16.1.0"
  },
  "engines": {
-   "node": ">=18.0.0"
+   "node": ">=20.9.0"
  }

インストールコマンド

npm install next@latest react@latest react-dom@latest
npm install -D @types/react@latest @types/react-dom@latest eslint-config-next@latest

---

2. next.config.js の修正

Turbopack設定の追加

Next.js 16からTurbopackがさらに強化されました。設定オブジェクトを追加しておきます。

// next.config.js
const nextConfig = {
  // Turbopack configuration
  turbopack: {},
  // ...
}

images.domains の廃止対応

images.domains が非推奨となったため、よりセキュアな remotePatterns に書き換えます。プロトコルの指定が必須になる点に注意です。

// Before (非推奨)
images: {
  domains: ['firebasestorage.googleapis.com', 'nero15.dev', 'localhost'],
}

// After
images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'firebasestorage.googleapis.com',
    },
    {
      protocol: 'https',
      hostname: 'nero15.dev',
    },
    {
      protocol: 'http',
      hostname: 'localhost',
    },
  ],
}

---

3. tsconfig.json の修正

React 19 では新しいJSXトランスフォームが推奨されるため、jsx 設定を変更します。これにより若干のパフォーマンス向上が期待できます。

// tsconfig.json
{
  "compilerOptions": {
-   "jsx": "preserve"
+   "jsx": "react-jsx"
  }
}

---

ハマりポイントと解決策

ここからは、アップグレード後に発生したエラーとその対処法です。

1. useRef の型定義エラー (React 19)

React 19の型定義変更により、useRef の初期値が必須になりました。これを修正しないと大量の型エラーが発生します。

症状: Type 'undefined' is not assignable to type 'number'

// Before
const animationRef = useRef<number>()

// After: 初期値 undefined を明示し、型も許容する
const animationRef = useRef<number | undefined>(undefined)

2. Server Component での onClick エラー

Server Component から Client Component へ関数（イベントハンドラ）を渡すことができなくなりました。

症状:

Error: Event handlers cannot be passed to Client Component props.
<button onClick={function handleClick}>
If you need interactivity, consider converting part of this to a Client Component.

対処法:

1. 不要なイベントハンドラなら削除する（今回はこれを採用）。
2. コンポーネント全体に 'use client' を付ける。
3. イベントハンドラを使う部分だけを Client Component に切り出す。

3. openGraph.tags による500エラー

これが一番のハマりどころでした。Next.js 16で Metadata の型定義が厳格化され、openGraph.tags プロパティを使うと実行時エラー（500 Internal Server Error）になるケースがあります。

対処法: openGraph.tags は使わず、汎用的な other フィールドを使用します。

// Before: 500エラーの原因
openGraph: {
  tags: ['tag1', 'tag2'],
}

// After
other: {
  'article:tag': tags.join(','),
}

---

今回対応を見送ったもの

以下の変更については、現時点で動作に影響がないため、後日対応としました。

• middleware.ts → proxy.ts: まだ middleware.ts がサポートされているため。
• 非同期 params: Next.js 15以降の変更点ですが、既存コードが動作したためcodemod等で後日対応。
• "use cache": まだ実験的な機能のため導入見送り。

---

まとめ：移行のコツ

1. まずは型チェック: npm run build の前に npm run type-check を実行すると、useRef などの型エラーを効率よく潰せます。
2. 画像の確認: remotePatterns への移行で記述ミスがあると画像が表示されなくなるので、必ず目視確認しましょう。
3. 段階的な対応: 警告レベルのものは後回しにして、まずは「ビルドが通る」「500エラーが出ない」状態を目指すのがおすすめです。

Next.js 16 は Turbopack による開発体験の向上が著しいので、早めの移行をおすすめします。

---

参考リンク

• Next.js 16 アップグレードガイド
• React 19 リリースノート