Next.js DevTools MCP

Next.js DevTools MCP

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

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

[!NOTE] ドキュメントと移行ワークフローは、このサーバーには含まれなくなりました。Next.js は独自のドキュメントを node_modules/next/dist/docs/ にバンドルし、アップグレード / キャッシュコンポーネントのワークフローはエージェントスキルとして配布されます。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