VSCode & GitHub Copilotでnext-devtools-mcpを使ってNext.jsをUpgradeをしてみた

はじめに

Next.js v16のアップデートがきてしばらく経ち､そろそろv15からアップデートをしようと思いました｡
せっかくならば､Next.jsのUpgrade Guideにも記載のあるNext.js DevTools MCPを用いて進めてみました｡
今回は､VSCode & GitHub Copilotから設定してv16へ上げてみます｡

アップグレードだけではなく､Next.js v16ではプロジェクト内部構造を理解したうえでコーディングエージェントを使うことができるようです｡
特にv16に上げると効率化を望めると思います｡

Next.js DevTools MCP とは

Next.js DevTools MCPはMCP サーバーで､
コーディングエージェント向けに開発ツールやユーティリティを用意してくれるものです｡

主に3つの機能が用意されています｡(詳しくはこちら)

1. Runtime Diagnostics & Live State Access (Next.js 16+)
   v16以上の実行中のNext.jsの内部情報にアクセスする機能

2. Development Automation
   主にNext.jsのUpgradeやセットアップ等､一般的な機能追加や変更を自動化できる機能

3. Knowledge Base & Documentation
   最新の公式ドキュメントにアクセス

VSCode, GitHub Copilotでセットアップ

VSCodeを用いて実施するため､セットアップします｡
今回は､プロジェクトごとの設定で行うため､リポジトリの.vscodeに設定ファイルを追加します｡
※ VSCodeとGitHub Copilotはすでにインストールされているものとします

1. まずはVSCodeでコマンドパレッドを開きます(Cmd + Shift + P)

2. 「MCP: ワークスペース フォルダー MCP構成を開く」を選択し、mcp.json を開きます
   

3. 再度コマンドパレッドを開き､｢サーバーの追加｣を選択
   

   1. コマンドを選択
      

   2. コマンド入力欄に以下を入力

      1. npx -y next-devtools-mcp@latest
         

   3. ID入力欄に next-devtools-mcp と入力して保存

ここまでで完了です｡
最終的なmcp.jsonは次のようになります｡
※ 問題なく動いている場合､VSCodeの拡張機能のパネルでインストール済みに追加されています

mcp.json

{
  "servers": {
    "next-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  },
  "inputs": []
}

---

Next.js v16へアップグレード

公式のv16 アップグレードガイドが存在するので､参考にしました｡

実行

Next.js v16のアップグレードは､専用のプロンプトが用意されています｡
Copilot Chatの欄で､
/mcp.next-devtools-mcp.upgrade-nextjs-16を入力します｡

あとはChatに出てくる実行許可をするだけで､アップグレードが完了しBuild完了まで進めてくれていました｡

Chat入力後は､環境の診断が進み次のコマンドを自動で実行しました｡

node --version && pnpm --version && pnpx @next/codemod@canary upgrade latest

完了後に､package.json等を確認し､16に変更されており､その他のファイルも問題なく変更されていました｡

どのようなシーンで使えそうか

アップグレード後にいくつか触ってみて､僕は他に以下のようなときに､便利に使えると思いました｡

1. Next.js初心者や新しくリポジトリにジョインしたメンバーのサポート
   • よりリポジトリの内部構造を理解したうえで､コーディングエージェントがサポートしてくれるため､オンボーディングコストが下げられると思います
2. 並行して調査ができそう
   • 別の機能開発をしながら調査も進めておきたいことはありませんか､GitHub Copilotにレポートを作ってもらう精度が上がり調査を進めやすくなると思います

おわりに

今回は､Next.js DevTools MCPを使ってアップグレードを試してみましたが､他にも､Playwrightを使ってブラウザテストを使ったり､エラーログの解析をしてくれたりといろいろなことをしてくれるようです｡
Next.js 16では､フレームワーク自体にMCPサーバーが組み込まれました｡
今回もそうですし､これからのNext.jsのアップデートに期待していきたいです｡

VSCodeでNext.js DevTools MCPを使ってみました｡

参考