🥰
Next DevTools MCPを使ってNext.js 16にアップグレードしてみたよ

2025/10/27に公開
 はじめに2025年10月、Next.js 16がついに正式リリースしましたね。 React 19.2の安定版サポート、パフォーマンスの大幅改善、そしてServer Actionsの進化など、多くの機能が登場しました。
しかし、メジャーバージョンアップには常にリスクが伴います。特に本番稼働中のプロジェクトでは、「いつアップグレードすべきか」「どんな破壊的変更があるのか」と慎重になるのではないでしょうか。
筆者はもうすぐ16が出るだろうということで、最新のcanary版（15.6.0-canary.40）で新規開発中だったプロジェクトを16へ移行しました。

スムーズにバージョン移行するためのポイントを、実際のアップグレード作業の経験をもとに解説します。

 なぜ今アップグレードすべきなのか？Next.jsは進化のスピードがとても早く、MCPが発表された今こそ、最も安全かつ効果的にアップデートできるタイミングだと思います。
MCPの登場により、コード変更の影響範囲の分析や依存関係のチェック、マイグレーションスクリプトの生成まで、AIの支援を受けながら作業を進められます。早期にアップグレードすることで、コミュニティの最新ベストプラクティスに追従でき、バージョンの差が開くほど増大する将来的な技術的負債も回避できます。

 Next.js 16 のリリースNext.js 16は、2025年10月にリリースされました。それにあわせて、以下のような各バージョンごとに詳細なガイドを用意しています。
公式アップグレードガイドは以下から確認できます。

Codemods - コードベースでアップグレードするための機能

Version 14 - Next.js 13 → 14 へのアップグレード

Version 15 - Next.js 14 → 15 へのアップグレード

Version 16 - Next.js 15 → 16 へのアップグレード（最新）

 Next.js 16 で何が変わったのかNext.js 16 公式ブログによると、主要な変更点は以下の通りです。

Cache Components: 部分的な事前レンダリング (PPR) を使用する新しいモデルで、キャッシュを使用して即時のナビゲーションを実現

MCP (Model Context Protocol): アプリケーション診断とデバッグのための統合

Built-inのMCP Server: Next.js 16+でデフォルト有効。実行中のアプリケーション内部へリアルタイムアクセス

Next DevTools MCP: 外部パッケージ。ブラウザ自動化、ドキュメント検索、アップグレードガイダンスを提供


プロキシ: ネットワーク境界を明確にするために置き換えられたミドルウェア proxy.ts

DX: ビルドと開発リクエストのログ記録が改善
ご参考までに、これらの機能は前回のベータ リリース以降から利用可能でした。
Turbopack (安定版) : 最大 5 ～ 10 倍高速な Fast Refresh と 2 ～ 5 倍高速なビルドを備えた、すべてのアプリのデフォルト バンドラー
Turbopack ファイル システム キャッシュ (ベータ版) : 最大規模のアプリの起動とコンパイル時間がさらに高速化
React compiler サポート (安定版) : 自動メモ化のための組み込み統合
ビルド アダプタ API (アルファ版) : ビルド プロセスを変更するためのカスタム アダプタを作成する
拡張ルーティング: レイアウト重複排除と増分プリフェッチによる最適化されたナビゲーションとプリフェッチ
改善されたキャッシュAPI : 新しくupdateTag()改良されたrevalidateTag()
React 19.2 : ビュー遷移useEffectEvent()、、<Activity/>
重大な変更: 非同期パラメータ、next/imageデフォルトなど
詳細は公式アップグレードガイドを参照してください。

 アップグレードの作業を始める前に公式の Version 16 アップグレードガイドにも目を通しておくことをお勧めします。このガイドは公式ドキュメントの実践的な補完としてご活用ください。

 必須要件作業を始める前に、以下を確認してください
Node.js 20.9 以上

これより古いバージョンだとビルドが通りません。素直にアップグレードしましょう。
TypeScript 5.1 以上（推奨）

5.0 でも動くかもしれませんが、型定義周りで問題が出る可能性があります。
Git のクリーンな状態

これ、めちゃくちゃ重要です。codemods は Git の履歴を見て差分を生成するので、未コミットの変更があると実行を拒否されます。

 環境確認コマンド# Node.js バージョン（20.9 以上必要）
node --version

# TypeScript バージョン（5.1 以上推奨）
grep '"typescript":' package.json

# Git 状態（clean であること！）
git status

 Next DevTools MCP のセットアップ（推奨）アップグレード作業全体を通じて、Next DevTools MCPを使うと便利です。これは作業開始前にセットアップしておくことを強く推奨します。
プロジェクトルートまたは ~/.cursor/ ディレクトリに .mcp.json を作成

※使っているAIエージェントに応じて設定してください。

https://github.com/vercel/next-devtools-mcp
{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}
このツールができること
アップグレード手順のガイダンス提供
Codemods実行方法の提案
公式ドキュメントのリアルタイム検索
アップグレード後のブラウザ自動化テスト
設定後、対応エディタ（Cursor、Claude Desktop等）を再起動すれば利用可能になります。
注意: Built-inのMCP Serverは、Next.js 16にアップグレード後、開発サーバー起動時に自動で有効になります（設定不要）。

 アップグレードの流れこのガイドでは、以下の流れでアップグレードを進めます

 事前準備
Next DevTools MCP のセットアップ（上記で完了）
アップグレード全体をサポート
ドキュメント検索、Codemodガイダンス、ブラウザテスト機能を提供


 フェーズ 1: バージョンアップの準備package.json更新と依存関係のインストール
Next.js 15 → 16 へのバージョンアップ

 フェーズ 2: Codemods による自動変換公式ツールでコードの自動書き換え
Next DevTools MCPでCodemods実行方法を確認可能

 フェーズ 3: ベストプラクティスへの移行手動での設定調整（proxy.ts、Turbopack設定など）
Next DevTools MCPでドキュメント検索しながら作業

 フェーズ 4: Built-inのMCP を使った診断とデバッグNext.js 16開発サーバー起動（Built-inのMCP自動有効化）
Next DevTools MCP経由でBuilt-inのMCPのツールにアクセス
リアルタイムエラー診断とブラウザ自動化テスト
2つのMCPサーバーの役割分担

Next DevTools MCP: フェーズ 1～4全体をサポート（事前セットアップ済み）

Built-inのMCP: フェーズ 4以降で利用（Next.js 16で自動有効化）

 フェーズ 1: バージョンアップの準備
 ステップ 1: package.jsonで現状把握まず、今どのバージョンを使っているか確認します。
"next": "15.6.0-canary.40"

 ステップ 2: package.json の更新全サービスで次のように更新します
{
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "eslint-config-next": "^16.0.0"
  }
}
重要: React 19.2 への同時アップグレード
Next.js 16 はReact 19.2 に対応しており、新しい機能（<Activity />、useEffectEvent、View Transitions など）が利用可能です。詳細はReact 19.2 公式ブログを参照してください。

Next.js 16 は React 19.2 を前提としているので、必ず React も一緒にアップグレード してください。

 ステップ 3: 依存関係のインストールnpm install --legacy-peer-deps
--legacy-peer-deps フラグを付けているのは、一部のライブラリがまだ React 19 に正式対応していないためです。
実行結果:
added 2 packages, removed 1 package, changed 16 packages
✓ No vulnerabilities found

 フェーズ 2: Codemods による自動変換
 Codemods とは何か簡単に言えば「コードの自動書き換えツール」です。Next.js チームが公式に提供していて、大部分の変更を自動で処理してくれます。

 実際にCodemods実行今回のプロジェクトでは、まず以下を実行してみました。

 1. next-async-request-apiNext.js 16 では params や searchParams が Promise になりました。
npx @next/codemod@latest next-async-request-api . --force
実行結果:
Processing 69 files...
Results: 
0 errors
68 unmodified
1 ok (modified)
変換例:
// Before
export default function Page({ params }: { params: { id: string } }) {
  return <div>User: {params.id}</div>;
}

// After
export default async function Page(props: { params: Promise<{ id: string }> }) {
  const params = await props.params;
  return <div>User: {params.id}</div>;
}

 2. next-og-importOG 画像生成で使う ImageResponse の import 元が変わりました。
npx @next/codemod@latest next-og-import . --force
// Before
import { ImageResponse } from 'next/server';

// After
import { ImageResponse } from 'next/og';

 3. metadata-to-viewport-exportメタデータから viewport 関連を分離します。
npx @next/codemod@latest metadata-to-viewport-export . --force
// Before
export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

 // After
export const metadata = {
  title: 'My App',
}
 
export const viewport = {
  width: 1,
  themeColor: 'dark',
}
他にもまだまだあるので、プロジェクトに応じて、以下を参考に実行してみてください。

https://nextjs.org/docs/app/guides/upgrading/codemods

 フェーズ 3: ベストプラクティスへの移行ファイル名: middleware.ts → proxy.ts
関数名: export function middleware → export default function proxy
それ以外のロジックは基本的に同じ

 Turbopack 設定の最適化
 turbopack.root の追加モノレポ構造だと、こんな警告が出ることがあります
⚠ Warning: Next.js inferred your workspace root, but it may not be correct.
We detected multiple lockfiles and selected the directory of 
/Users/~~~/projects/hogehoge/package-lock.json as the root directory.
これを消すために、next.config.ts に一行追加
const nextConfig: NextConfig = {
  turbopack: {
    root: __dirname,  // これを追加
  },
};
警告が消えてスッキリしました。

 --turbopack フラグの削除Next.js 16 では Turbopack がデフォルトなので、もう --turbopack フラグは不要です。
Before:
{
  "scripts": {
    "dev": "next dev --turbopack -p 3001",
    "build": "next build --turbopack"
  }
}
After:
{
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build"
  }
}
フラグを残したままだとどうなる？
エラーにはなりませんが、「redundant flag（冗長なフラグ）」という警告が出ます。

機能的には問題ないですが、ベストプラクティスからは外れます。

 フェーズ 4: Built-inのMCP を使った診断とデバッグCodemods実行とベストプラクティスへの移行が完了したら、いよいよNext.js 16の開発サーバーを起動します。ここからはBuilt-inのMCP Serverが自動的に有効になり、事前にセットアップしたNext DevTools MCPと連携して、強力な診断環境が利用できます。

 2つのMCPサーバーが揃うこのフェーズで、ようやく2つのMCPサーバーが揃います

 1. Next DevTools MCP (External Package) - 既にセットアップ済みフェーズ 1より前にセットアップ済み
これまでのフェーズでも活躍してきたツール
アップグレード手順のガイダンス提供
Codemods実行方法の提案
公式ドキュメントのリアルタイム検索

このフェーズから: Built-inのMCPへの接続と診断機能

 2. Built-inのMCP Server - このフェーズで自動有効化Next.js 16開発サーバー起動時に自動有効
Next.js 16にアップグレードしたため、開発サーバー起動時に自動的に有効化されます
npm run dev
起動すると、http://localhost:3000/_next/mcp というエンドポイントが自動生成され、以下の情報を提供
リアルタイムのアプリケーション状態
ページメタデータ、ルート、レンダリング情報
ビルドエラー、ランタイムエラー、開発ログ
Server Actions とコンポーネント階層の検査
重要: Next DevTools MCP が Built-inのMCP を自動検出し、そのツール（get_errors、get_logsなど）にアクセスできるようにします。

 Built-inのMCP Server の動作確認開発サーバーを起動します
npm run dev
ターミナル出力:
▲ Next.js 16.0.0 (Turbopack)
- Local:        http://localhost:3000
- Environments: .env.local

✓ Ready in 624ms
起動すると、事前にセットアップしておいた Next DevTools MCP が、自動的に Built-inのMCP Server を検出します
// Next DevTools MCP を使ってサーバー検出
mcp_next-devtools_nextjs_runtime(action: "discover_servers")
結果:
{
  "success": true,
  "count": 1,
  "servers": [{
    "port": 3000,
    "pid": 39448,
    "url": "http://localhost:3000",
    "mcpEndpoint": "http://localhost:3000/_next/mcp"
  }]
}
接続成功です！Built-inのMCP の /_next/mcp エンドポイントが自動的に作られています。

 Built-inのMCP が提供するツール一覧Next DevTools MCP 経由で、Built-inのMCP のツールを確認
mcp_next-devtools_nextjs_runtime(
  action: "list_tools",
  port: 3000
)
結果:
{
  "success": true,
  "tools": [
    "get_project_metadata",  // プロジェクト情報
    "get_errors",            // エラー診断 ← これが超便利
    "get_page_metadata",     // ページメタデータ
    "get_logs",              // ログ取得
    "get_server_action_by_id" // Server Actions 検索
  ]
}
これらのツールはすべて Built-inのMCP Server が提供するものです。

 実例: Built-inのMCP の get_errors でバグを発見実際に Built-inのMCP の get_errors ツール を使ってバグを発見した事例を紹介します。
本プロジェクトを起動して、ブラウザで開いたらターミナルには何もエラーが出ていません。

従来なら、ブラウザの開発者ツールを開いて、コンソールを見て...という流れですが、MCPがあればもっと簡単です。

 get_errors の実行（Built-inのMCP）Next DevTools MCP を経由して、Built-inのMCP の get_errors を呼び出します
mcp_next-devtools_nextjs_runtime(
  action: "call_tool",
  port: 3000,
  toolName: "get_errors"
)
結果（一部抜粋）:
# Found errors in 1 browser session(s)

## Session: /

**2 error(s) found**

### Runtime Errors

#### Error 1 (Type: console)

**Error**: ⚠️ ドメインが許可されていないためウィジェットを表示できません

at Home.useEffect [as error] (src/app/page.tsx:162:21)

at handleConsoleError (.../node_modules_next_dist_4b2403f5._.js:2977:54)

Context: { scriptId: "2214e143-...", origin: "http://localhost:3000" }

#### Error 2 (Type: console)

**Error**: hogehoge: ウィジェット設定の取得に失敗したため処理を停止します


従来の方法だと、こうなります

```bash
# curl でチェック
$ curl -I http://localhost:3000
HTTP/1.1 200 OK

# 「あれ、200 だから正常じゃん？」→ 勘違い
でも、MCP の browser_eval（ブラウザ自動化）を使うと
[ERROR] Failed to load resource: 403 Forbidden
[ERROR] ⚠️ ドメインが許可されていないため...
curl では見つからないエラーを発見！
なぜなら、curl は HTML を取得するだけで、JavaScript を実行しないからです。MCP の browser_eval は実際にブラウザでページを開いて、JavaScript も実行するので、ランタイムエラーまで拾えます。

 Next DevTools MCP のブラウザ自動化（browser_eval）ここからは Next DevTools MCP (External Package) が提供する高レベルな機能です。Playwright統合によるブラウザ自動化が便利でした。
// 1. ブラウザ起動
mcp_next-devtools_browser_eval(action: "start")
// → "Browser automation started (chrome, headless: true)"

// 2. ページを開く
mcp_next-devtools_browser_eval(
  action: "navigate",
  url: "http://localhost:3000"
)
// → ページが読み込まれ、JavaScript も実行される

// 3. エラーのみを抽出
mcp_next-devtools_browser_eval(
  action: "console_messages",
  errorsOnly: true
)
結果:
[ERROR] Failed to load resource: 403
        @ https://hogehoge.local/api/web/script?id=...

[ERROR] ドメインが許可されていないためウィジェットを表示できません
        @ http://localhost:3000/_next/static/chunks/...
スタックトレース付きで、エラーの場所まで教えてくれます。これなら、すぐに修正箇所が分かります。またこのエラーを活用してAIエージェントのコード修正にも役立ちます。

 まとめと振り返り実際に本プロジェクト（4サービス）をアップグレードした結果
作業前:
Next.js 15.6.0-canary.40
middleware.ts を使用
--turbopack フラグ必須
エラー診断は手動
作業後:
Next.js 16.0.0 に移行完了
React 19.2 に対応
Next DevTools MCP を事前セットアップ（アップグレード全体をサポート）
Codemods で多数のファイルを自動修正
手動での設定調整完了（proxy.ts、Turbopack設定など）
Built-inのMCP Server 自動有効化（Next.js 16開発サーバー起動時）
2つのMCPサーバー連携でリアルタイム診断環境を構築
Cache Components、Enhanced Routing などの新機能が利用可能に
ビルド結果（全サービス）:
✓ hogehoge: Next.js 16.0.0 (Turbopack) - 成功

 2つのMCPサーバーを組み合わせた開発体験このアップグレードを通じて、Next.js 16のMCP機能の可能性を実感しました。事前にセットアップしたNext DevTools MCPと、アップグレード後に自動有効化されたBuilt-inのMCPが連携することで、以下のような開発体験が実現できました。

 アップグレード前（フェーズ 1～3）: Next DevTools MCP単体
ドキュメント検索: 「proxy.tsの書き方は？」→即座に公式ドキュメントから回答

ガイダンス: 「next-async-request-api codemodの使い方は？」→実行コマンドと注意点を提示

問題解決: エラーが出たら、最新のベストプラクティスを検索

 アップグレード後（フェーズ 4）: 2つのMCPが連携従来の診断方法:
エラーが出る
ブラウザコンソールを開く
ターミナルログを見る
ビルドログを見る
どこでエラーが出てるんだ？ ← ここで詰まる
2つのMCP連携後:
エラーが出る
Next DevTools MCPの get_errors でBuilt-inのMCPに問い合わせ
スタックトレース付きで全エラー表示
即座に修正箇所を特定
実例: curl vs Next DevTools MCP
# curl だと...
$ curl -I http://localhost:3000
HTTP/1.1 200 OK  # ← 成功に見える

# でも Next DevTools MCP の browser_eval だと...
[ERROR] 403 Forbidden
[ERROR] JavaScript エラー検出
curl では見つからないランタイムエラーを、Next DevTools MCP のブラウザ自動化は見つけてくれます。
連携の威力:

事前セットアップ（Next DevTools MCP）: アップグレード全体をサポート

自動有効化（Built-inのMCP）: アプリケーション内部状態をリアルタイム提供

シームレス統合: Next DevTools MCP が Built-inのMCP を自動検出

 次のステップアップグレードが完了したら試すこと
React 19.2 の新機能を活用

<Activity /> でタブやページの状態保持を実装

useEffectEvent で Effect の依存配列問題を解決

useOptimistic で楽観的UI更新を実装

useFormStatus で Server Actions を強化
その他バージョンによる変更点の更新

詳細はReact 19.2 公式ブログを参照してください。
両方のMCPサーバーを日常の開発に組み込む
Built-inのMCP: リアルタイムエラー診断で問題を即座に特定（get_errors、get_logs）
Next DevTools MCP: ブラウザ自動化で実際の動作検証、ドキュメント検索で最新情報を即座に参照
Cache Components を検討

まだ実験的機能ですが、パフォーマンス改善に大きく貢献します。
Turbopack の恩恵を測定

ビルド時間やHMRの速度を計測してみると、体感以上に速くなっているはず。

 最後にNext.js 16へのアップグレードを通じて、フレームワークの進化を実感しました。

codemodsによる大部分の自動化、MCPのような開発者体験を劇的に向上させるツールの標準搭載され、「アップグレードは大変」という常識が変わりつつあることを示しています。
もちろん、プロジェクトごとに固有の課題はあるとは思いますが、適切なツールの使い方と手順を押さえておけば、メジャーバージョンアップも決して決して大変なものではなくなってきていると思います。
このガイドが、皆さんのアップグレード作業を少しでもスムーズにする助けになれば幸いです。

 参考リンク
 公式アップグレードガイド
Next.js Upgrade Guides - 全バージョンのアップグレードガイド索引

Version 16 Upgrade Guide - 公式の Next.js 16 アップグレードガイド

Version 15 Upgrade Guide - Next.js 15 アップグレードガイド

Version 14 Upgrade Guide - Next.js 14 アップグレードガイド

Next.js Codemods - 自動変換ツールの詳細

 ドキュメント・ツール
Next.js 16 公式ブログ - Next.js 16 の全機能詳細
Next.js 16 公式ドキュメント

React 19.2 公式ブログ - React 19.2 の新機能詳細

React 19 公式ドキュメント - React 19 の新機能とアップグレードガイド

Next.js MCP Server Guide - 両方のMCPサーバー（Built-in と External Package）の公式ガイド

next-devtools-mcp Repository - Next DevTools MCP (External Package) のリポジトリ

Model Context Protocol 公式 - MCP の仕様とツール
はじめに

なぜ今アップグレードすべきなのか？

Next.js 16 のリリース

Next.js 16 で何が変わったのか

アップグレードの作業を始める前に

必須要件

環境確認コマンド

Next DevTools MCP のセットアップ（推奨）

アップグレードの流れ

事前準備

フェーズ 1: バージョンアップの準備

フェーズ 2: Codemods による自動変換

フェーズ 3: ベストプラクティスへの移行

フェーズ 4: Built-inのMCP を使った診断とデバッグ

フェーズ 1: バージョンアップの準備

ステップ 1: package.jsonで現状把握

ステップ 2: package.json の更新

ステップ 3: 依存関係のインストール

フェーズ 2: Codemods による自動変換

Codemods とは何か

実際にCodemods実行

1. next-async-request-api

2. next-og-import

3. metadata-to-viewport-export

フェーズ 3: ベストプラクティスへの移行

Turbopack 設定の最適化

turbopack.root の追加

--turbopack フラグの削除

フェーズ 4: Built-inのMCP を使った診断とデバッグ

2つのMCPサーバーが揃う

1. Next DevTools MCP (External Package) - 既にセットアップ済み

2. Built-inのMCP Server - このフェーズで自動有効化

Built-inのMCP Server の動作確認

Built-inのMCP が提供するツール一覧

実例: Built-inのMCP の get_errors でバグを発見

get_errors の実行（Built-inのMCP）

Next DevTools MCP のブラウザ自動化（browser_eval）

まとめと振り返り

2つのMCPサーバーを組み合わせた開発体験

アップグレード前（フェーズ 1～3）: Next DevTools MCP単体

アップグレード後（フェーズ 4）: 2つのMCPが連携

次のステップ

最後に

参考リンク

公式アップグレードガイド

ドキュメント・ツール

Discussion
