Next.js MCP Server (Official)

Next.js MCP Server (Official) とは？

公式の Next.js MCP サーバーは Vercel の next-devtools-mcp です。Claude や Cursor などのコーディングエージェントを実行中の Next.js 開発サーバーに接続し、ライブのエラー、ルート、ログ、コンパイルの問題を読み取れるようにします。

Next.js 16 以降では、開発サーバー自体が /_next/mcp に組み込みの MCP エンドポイントを公開しています。next-devtools-mcp は薄いコネクターで、手元のマシンで動いている Next.js 16+ の開発サーバーを検出し、そのエンドポイントをエージェントにプロキシします。さらに、node_modules/next/dist/docs/ に同梱されたバージョンに合ったドキュメントと、agent-browser CLI へエージェントを案内する 2 つのゲートウェイツールも備えています。プロジェクトは vercel/next-devtools-mcp にあり、MIT ライセンスで、API キー不要で無料で使えます。

Next.js MCP Server (Official) の使い方

前提条件：

• Node.js v20.19 以降の LTS バージョン
• npm または pnpm
• Next.js 16 以降と、実行中の開発サーバー（nextjs_index と nextjs_call に必要）

最も手早い方法では、マシン上で検出されたすべてのコーディングエージェントにまとめて設定されます：

npx add-mcp next-devtools-mcp@latest

-y を付けると確認をスキップし、-g を付けるとグローバルにインストールします。あるいは、プロジェクトのルートにある .mcp.json（またはクライアントの MCP 設定）に追加します：

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

その後 npm run dev でアプリを起動します。Next.js 16+ はデフォルトで http://localhost:3000/_next/mcp のエンドポイントを有効にしており、next-devtools-mcp が追加設定なしで自動的に見つけます。get_errors や get_page_metadata などのツールはアクティブなブラウザーセッションから情報を読むため、作業中のページをブラウザーで開いておいてください。

Claude Code

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

Cursor

README の「Install in Cursor」リンクを使うか、Cursor Settings → MCP → New MCP Server を開いて上記の設定を貼り付けます。

VS Code

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

Codex

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

Windows 11 では、.codex/config.toml のサーバーエントリに env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } と startup_timeout_ms = 20_000 を追加します。

README には Amp、Gemini CLI、Google Antigravity、Warp の手順も記載されています。

プロンプト例：「Next Devtools, what errors are in my Next.js application?」や「Next Devtools, show me the structure of my routes.」

Next.js MCP Server (Official) の主な機能

• ライブのランタイムコンテキスト：エージェントはソースから推測するのではなく、実行中アプリの実際のエラー、ルート、ログを確認できます。
• 自動検出：よく使われるポートをスキャンし、実行中のすべての Next.js 16+ 開発サーバーに接続します。複数プロジェクトの同時接続にも対応します。
• next build 不要のコンパイルチェック：Turbopack プロジェクトでは、開発サーバーからルートごとのコンパイル問題を直接取得できます。
• バージョンに合ったドキュメント：nextjs_docs は、インストール済みの Next.js に同梱されたドキュメントへエージェントを案内します。
• ブラウザーでの検証：browser_eval は agent-browser CLI のインストール方法と実行方法をエージェントに伝えます。
• 公式かつ軽量：Vercel がメンテナンスしており、0.4.0 で 4 つのツールに絞り込まれました。
• プライバシー設定：匿名テレメトリは NEXT_TELEMETRY_DISABLED=1 で無効にできます。

Next.js MCP Server (Official) のツール

サーバー自体が公開するツールは 4 つです：

• nextjs_index は実行中の開発サーバーを検出し、それぞれが公開しているランタイムツールを一覧表示します。
• nextjs_call は検出したサーバー上のランタイムツールを 1 つ呼び出します。引数は port、toolName、任意の args です。
• nextjs_docs はゲートウェイで、同梱ドキュメントのパスを返します（Next.js 16 未満ではアップグレードを提案します）。
• browser_eval はゲートウェイで、agent-browser のセットアップ手順を返します。ブラウザー自体は操作しません。

nextjs_call を通じて、エージェントは Next.js が /_next/mcp で提供するランタイムツール（バージョンにより異なります）を利用できます：get_errors、get_logs、get_page_metadata、get_project_metadata、get_routes、get_server_action_by_id、Turbopack 専用の get_compilation_issues と compile_route、そして experimental.requestInsights が必要な get_request_insights です。

Next.js MCP Server (Official) のユースケース

• ランタイムエラーの修正：「今アプリにどんなエラーがある？」エージェントが get_errors を呼び出し、たとえばハイドレーションの不一致に対する修正を提案します。
• 不慣れなコードベースの把握：「App Router と Pages Router のルートをすべて見せて。」
• 変更がコンパイルできるかの確認：フルの next build の代わりに、/blog/[slug] に対して compile_route を実行するようエージェントに依頼します。
• Server Action の追跡：エラーに出てきた action ID を get_server_action_by_id でソースファイルまでたどります。
• インストール済みバージョンに合ったドキュメントでフレームワークの質問に回答：「App Router ではいつ 'use client' を使うべき？」

Next.js MCP Server (Official) と代替ツールの比較

• 組み込みの /_next/mcp エンドポイントが公式構成の中核です。next-dev-loop などのエージェント skills はこれを直接呼び出すため、next-devtools-mcp なしでも動作します。MCP パッケージは、プロジェクトやバージョンをまたいで一貫したツールセットをエージェントに提供します。
• jazelly による Next.js MCP Server はコミュニティ製のルーター解析ツールです。実行中の開発サーバーではなくソースコードからアプリディレクトリをスキャンし、API ルートのパス、HTTP メソッド、パラメーター、スキーマを抽出します。
• より詳しいブラウザーデバッグには、Chrome DevTools MCP Server と組み合わせて使えます。

Next.js MCP Server (Official) のトラブルシューティング

• [error] No server info found：nextjs_index と nextjs_call には実行中の Next.js 16+ 開発サーバーが必要です。npm run dev で起動し、バージョンが 16 以降であること、エラーなく起動したことを確認します。nextjs_docs と browser_eval は開発サーバーなしでも動きます。
• エージェントが接続できない：next.config で experimental.mcpServer が false になっていないか確認し、開発サーバーを再起動して、クライアントが MCP 設定を読み込んでいるか確かめます。
• next-devtools-mcp/dist を参照する ERR_MODULE_NOT_FOUND：npx のキャッシュを消去し、MCP クライアントを再起動します。
• 以前のツールが見当たらない：init、upgrade_nextjs_16、enable_cache_components は 0.4.0 で削除されました。アップグレードと Cache Components のワークフローは、現在エージェント skills として提供されています。