Next.js DevTools MCP

Next.js DevTools MCP

next-devtools-mcp は、Claude や Cursor などのコーディングエージェントを実行中の Next.js 開発サーバーに接続する Model Context Protocol (MCP) サーバーです。

これは薄いコネクタです。実行中の Next.js 16+ 開発サーバーを検出し、その組み込み MCP エンドポイント (/_next/mcp) をプロキシして、エージェントがライブのランタイムエラー、ルート、ログを取得できるようにします。また、エージェントが直接実行するツールを指し示すゲートウェイも 2 つ同梱されています。バージョンに正確なドキュメントと agent-browser CLI です。

[!NOTE] ドキュメントと移行ワークフローは、このサーバーにはもう含まれていません。Next.js は独自のドキュメントを node_modules/next/dist/docs/ にバンドルしており、アップグレード / Cache Components ワークフローはエージェントスキルとして配布されています。0.3.x からの移行 を参照してください。

要件

• Node.js v20.19 またはそれ以降の LTS バージョン
• npm または pnpm
• Next.js 16+ と実行中の開発サーバー (nextjs_index / nextjs_call 用)

インストール

add-mcp を使用して、すべてのコーディングエージェントにインストールします:

npx add-mcp next-devtools-mcp@latest

-y を追加すると、プロンプトをスキップして検出されたすべてのエージェントにインストールします。-g を追加すると、すべてのプロジェクトにグローバルにインストールします。

または、MCP クライアントに設定を手動で追加します:

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

[!NOTE] next-devtools-mcp@latest は、クライアントを最新バージョンに保ちます。

クライアント固有のセットアップ

amp mcp add next-devtools -- npx next-devtools-mcp@latest

claude mcp add next-devtools npx next-devtools-mcp@latest

codex mcp add next-devtools -- npx next-devtools-mcp@latest

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest

# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

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

code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

クイックスタート

Next.js 開発サーバーを起動します:

npm run dev

Next.js 16+ は、デフォルトで http://localhost:3000/_next/mcp に MCP エンドポイントを有効にします。next-devtools-mcp はそれを自動的に検出して接続します — 設定は不要です。

次に、実行中のアプリについてエージェントに質問します:

Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what's in the development server logs?

エージェントは nextjs_index を呼び出してサーバーを検出し、次に nextjs_call を呼び出して実際の状態を照会します。

ツール

ゲートウェイはそれ自体では作業を行いません — ドキュメントの場所や CLI のインストール/実行方法をエージェントに伝え、エージェントが直接実行します (MCP を介したプロキシよりも高速です)。

{ "port": 3000, "toolName": "get_errors" }

0.3.x からの移行

0.4.0 以降、next-devtools-mcp は薄いコネクタです。

変更点:

• nextjs_docs はネットワーク経由でドキュメントを取得しなくなりました。Next.js が node_modules/next/dist/docs/ にバンドルしているドキュメントをエージェントに指し示します (またはアップグレードを推奨します)。nextjs-docs://llms-index リソースは削除されました。

削除されたもの:

• init ツール — 古いドキュメント取得ワークフローを強制するだけでした。
• upgrade_nextjs_16 および enable_cache_components ツールとそのプロンプト — 現在はエージェントスキルとして配布されています。
• すべての cache-components://、nextjs16://、および nextjs-fundamentals:// リソース — バンドルされたドキュメントに置き換えられました。

残っているもの: nextjs_index、nextjs_call、nextjs_docs、および browser_eval。

プライバシーとテレメトリ

next-devtools-mcp は、ツールを改善するために匿名の使用テレメトリを収集します:

• ツールの使用状況 — 呼び出された MCP ツール (例: nextjs_index、nextjs_call)
• エラーイベント — ツールが失敗したときの匿名エラーメッセージ
• セッションメタデータ — セッション ID、タイムスタンプ、基本環境 (OS、Node.js バージョン)

収集されないもの: コード、ファイルの内容やパス、個人データ、資格情報、ツールの引数 (ツール名のみ)。

ローカルファイルは ~/.next-devtools-mcp/ の下にあります (匿名の telemetry-id、telemetry-salt、およびデバッグログ mcp.log)。

オプトアウトするには、環境変数を設定します (永続化するには ~/.zshrc / ~/.bashrc に追加):

export NEXT_TELEMETRY_DISABLED=1

ローカルのテレメトリデータはいつでも削除できます:

rm -rf ~/.next-devtools-mcp

トラブルシューティング

ERR_MODULE_NOT_FOUND が next-devtools-mcp/dist を参照している — npx キャッシュをクリアして MCP クライアントを再起動します。サーバーは新しく再インストールされます。

[error] No server info found — nextjs_index / nextjs_call には実行中の Next.js 16+ 開発サーバーが必要です:

1. 起動します: npm run dev
2. Next.js 16+ を確認します (/_next/mcp エンドポイントはそこにのみ存在します)
3. エラーなしで起動したことを確認します

browser_eval と nextjs_docs は開発サーバーなしで動作します。

ローカル開発

git clone https://github.com/vercel/next-devtools-mcp.git
cd next-devtools-mcp
pnpm install
pnpm build

MCP クライアントをローカルビルドに向けます:

{
  "mcpServers": {
    "next-devtools": {
      "command": "node",
      "args": ["/absolute/path/to/next-devtools-mcp/dist/index.js"]
    }
  }
}

または Codex を使用:

codex mcp add next-devtools-local -- node dist/index.js

MCP が Next.js とコーディングエージェントでどのように機能するかについては、Next.js MCP ドキュメント を参照してください。

ライセンス

MIT