ブログ一覧に戻る

Next.js 15 プロジェクトを Next.js 16 にアップグレードする方法

December 5, 2025
Next.js 15 プロジェクトを Next.js 16 にアップグレードする方法
Next.js 16 は開発体験が大幅に向上しており、next-devtools-mcp を使えば数ステップで簡単にアップグレードできます。
Next.js Techniques

Next.js 16 はすでにリリースからしばらく経ちますが、私自身の複数のプロダクトや個人プロジェクトをすべてアップグレードしてみたところ、大きな問題は一切発生しませんでした。現時点では、安心してアップグレードをおすすめできる状態だと感じています。

最大のメリットは、開発体験の大幅な高速化です。公式が公開している数値では、Fast Refresh が 5〜10 倍、ビルド速度が 2〜5 倍向上しています。

アップグレード手順

Next.js チームが提供している next-devtools-mcp を利用すると、アップグレード作業の大半を Agent に任せることができます。以下は具体的な流れです。

Step 1：MCP クライアントの設定

使用している開発ツールに合わせて MCP を設定します。

  • Cursor： Cursor Settings → MCP → New MCP Server に進み、以下を追加します：

    {
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

  • Claude Code： claude mcp add next-devtools npx next-devtools-mcp@latest

  • Codex： codex mcp add next-devtools -- npx next-devtools-mcp@latest

  • Gemini CLI： gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

ほかのツールを使っている場合は、next-devtools-mcp のページで設定方法を確認できます。

Step 2：Agent にアップグレードを任せる

エディタの Agent モードを開き、以下のように入力します：

Next Devtools, help me upgrade my Next.js app to version 16

これだけで、主要なアップグレード作業を自動で進めてくれます。

Step 3：Next.js と React が正しく更新されたか確認する

Agent は通常 Next.js や ESLint を更新しますが、React のバージョンは自動で更新されないため、手動で以下を実行してください：

pnpm i react@latest react-dom@latest @types/react@latest @types/react-dom@latest

Step 4：その他の調整

  • next-intl をアップデート pnpm i next-intl@latest
  • .gitignore の末尾に以下を追加：
.pnpm-store

最後に .next ディレクトリを削除し、開発サーバーを再起動します：

npm run dev

これで Next.js 16 で開発を始められます。

まとめ

私の各プロジェクトでは、Next.js 16 へ移行してから 1 か月以上安定して動作しており、唯一の変化は「開発がとにかく快適になった」という点でした。そのため、NEXTY.DEV も Next.js 16 にアップグレード済みです。

ブログ一覧に戻る