Next.js MCP Server を使用したコーディングエージェントの有効化

Model Context Protocol（MCP）は、AI エージェントとコーディングアシスタントが標準化されたインターフェースを通じてアプリケーションと対話できるようにするオープン標準です。

Next.js は 2 つの MCP サーバーを提供しており、最適なエージェント体験を得るには両方を一緒に使用することをお勧めします。

1. Next.js MCP Server（ビルトイン）

Next.js 16 以上で利用可能

Next.js MCP サーバーはアプリケーションの内部を公開し、エージェントが以下を実行できるようにします。

リアルタイムアプリケーション状態とランタイム情報にアクセス
ページメタデータ、ルート、レンダリング詳細をクエリ
ビルドエラー、ランタイムエラー、開発ログを取得
Server Action とコンポーネント階層を検査

このサーバーは Next.js dev サーバー内で実行され、アプリケーションの内部状態への直接アクセスを提供します。

2. Next DevTools MCP（外部パッケージ）

next-devtools-mcpは高レベルの開発ツールとガイダンスを提供する別個のパッケージです。

Next.js Knowledge Base：包括的な Next.js ドキュメントと最良の実践をクエリ
Migration と Upgrade ツール：codemod を使用した Next.js 16 へのアップグレードの自動化ヘルパー
Cache Components ガイド：Cache Components のセットアップと設定支援
ブラウザテスト：ページをブラウザで検証するための Playwright MCP 統合

さらに、next-devtools-mcpは実行中の Next.js dev サーバーを自動的に検出し、その MCP ツール（get_errors、get_logs、get_page_metadata など）に直接通信できます。

これら 2 つの MCP サーバーを組み合わせることで、エージェントは低レベルのアプリケーション内部と高レベルの開発ガイダンスの両方を提供します。

使い始める

ビルトイン Next.js MCP サーバーは Next.js 16 以上の開発時にデフォルトで有効になっています。

Next DevTools MCP の設定

Next DevTools MCP を使用するには、プロジェクトのルートにある .mcp.json ファイルに next-devtools-mcp を追加します。

.mcp.json

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

開発ツールの機能と設定オプションの詳細については、next-devtools-mcp リポジトリをご確認ください。

エージェントでの使用

MCP 互換のコーディングエージェントは、Next.js 開発サーバーを自動的に検出して接続できます。これにより、エージェントにプロジェクトに関する充実したコンテキストを提供します。

エージェント支援開発の利点

エージェントは以下を実行できます。

コンテキストを考慮した提案を作成：既存の構造に基づいて、新機能を追加する適切な場所を推奨
ライブアプリケーション状態をクエリ：開発中に現在の設定、ルート、ミドルウェアを確認
アプリ router ページレイアウトを理解：ページで実際にレンダリングされているページとレイアウトを正確に把握
正確な実装を提供：プロジェクトのパターンと規約に従うコードを生成

開発ワークフロー

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

Terminal

npm run dev

コーディングエージェントを実行中の Next.js インスタンスに接続します。
ブラウザでアプリケーションを開いてページを表示します。
エージェントに洞察と診断をクエリします（以下の例を参照）。

利用可能な Next.js MCP ツール

実験的な Next.js MCP サーバーは以下のツールを提供します。

get_errors：dev サーバーから現在のビルドエラー、ランタイムエラー、型エラーを取得
get_logs：開発サーバーログとコンソール出力にアクセス
get_page_metadata：ルート、コンポーネント、レンダリング情報を含む特定のページに関するメタデータを取得
get_project_metadata：プロジェクト構造、設定、全体的なメタデータを取得
get_server_action_by_id：デバッグと検査のために ID で Server Action を検索

例

エラー検出と診断

エージェントは実行中の Next.js アプリケーションにクエリしてリアルタイムエラー情報を取得できます。

User: "What errors are currently in my application?"

エージェントアクション：

Next.js MCP サーバーによって提供される get_errors ツールを呼び出し
dev サーバーから現在のビルドエラー、ランタイムエラー、型エラーを取得
エラーを分析し、実行可能な修正を提供

エージェント応答（展開するにはクリック）

> fix errors on the page
 
⏺ I'll help you fix the errors on the page. Let me first check what errors exist by looking at the
  current state of the project.
 
⏺ next-devtools - nextjs_runtime (MCP)(action: "discover_servers")
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
 
⏺ I found a hydration error on the /about page. The error shows that the server is rendering
  "server" but the client is rendering "client", causing a mismatch. Let me create a todo list and fix
   this issue.
 
⏺ Perfect! Now let me check for errors on the page.           01:14 PM  claude-sonnet-4-5-20250929
 
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
  ⎿ {
      "success": true,
      "port": 3000,
      "toolName": "get_errors",
      "result": {
        "content": [
          {
            "type": "text",
            "text": "# Found errors in 1 browser session(s)\n\n## Session: /about\n\n**1 error(s)
     found**\n\n### Runtime Errors\n\n#### Error 1 (Type: recoverable)\n\n**Error**: Hydration failed

これは両方の MCP サーバーが有効になっていることの力を示しています。Next.js MCP サーバーはアプリケーションからリアルタイムの診断を提供し、next-devtools-mcp は最良の実践と migration パスに関するガイダンスを提供できます。

アップグレードと最良の実践

Next.js の概念と migration について支援を求めることもできます。

User: "Help me upgrade my Next.js app to version 16"

エージェントは next-devtools-mcp を使用して現在のバージョンを分析し、codemod を使用した自動化 migration を通じてガイドし、async Request API、動的ルートセグメント、ルートハンドラーの戻り値の型などの破壊的変更に対処するためのステップバイステップの手順を提供します。

また、概念的な質問をすることもできます。

User: "When should I use 'use client' in App Router?"

エージェントは next-devtools-mcp 経由で Next.js knowledge base をクエリし、コードベースの例を含むドキュメントに基づいた説明を提供します。

トラブルシューティング

MCP サーバーが接続しない

Next.js v16 以上を使用していることを確認します
開発サーバーを起動します：npm run dev
開発サーバーを再起動します
MCP クライアントが正しいパスで設定されていることを確認します
エージェントの設定に MCP サーバーを追加します