Next.jsランタイムの検査

Next.jsランタイムの検査

2つの補完的なMCPサーバーでNext.jsランタイム情報にアクセス。

クイックスタート

// 現在のエラーを取得
mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_errors"
})

// 開発ログを取得
mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_logs"
})

// ページメタデータを取得
mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_page_metadata",
  args: { path: "/​users" }
})

2つのMCPサーバー

1. 組み込みMCPサーバー（低レベル）

Next.js内部への直接アクセス。Next.js 16+でデフォルト有効。

公式の5つのツール:

get_errors

現在のビルドエラー、ランタイムエラー、型エラーを取得。

mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_errors"
})

使用する場合:

• ビルド失敗のデバッグ
• ランタイムエラーの調査
• 型エラーのチェック
• ハイドレーションエラーの診断

---

get_logs

開発サーバーのログとコンソール出力にアクセス。

mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_logs"
})

使用する場合:

• サーバーサイドのコンソール出力確認
• リクエストログのレビュー
• 開発サーバーの活動監視

---

get_page_metadata

ルート、コンポーネント、レンダリング情報を含む特定ページのメタデータを取得。

mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_page_metadata",
  args: { path: "/​users/[id]" }
})

使用する場合:

• ページ構造の理解
• ルートに対してどのlayout/​pageがレンダリングされるか確認
• コンポーネント階層の検査
• レンダリング戦略の決定（静的/動的）

---

get_project_metadata

プロジェクト構造、設定、全体的なメタデータを取得。

mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_project_metadata"
})

使用する場合:

• プロジェクトアーキテクチャの理解
• Next.js設定の確認
• ルート構造のレビュー
• ミドルウェア設定の分析

---

get_server_action_by_id

デバッグと検査のためにIDでServer Actionsを検索。

mcp__next-devtools__nextjs_runtime({
  action: "call_tool",
  toolName: "get_server_action_by_id",
  args: { id: "abc123" }
})

使用する場合:

• Server Actionエラーのデバッグ
• Server Action実行のトレース
• Server Action実装の検査

---

2. next-devtools-mcp（高レベル）

開発ガイダンスとドキュメント。別パッケージが必要。

機能:

• ドキュメント検索（nextjs_docs）
• ランタイム調査の概要
• ベストプラクティスの推奨

// ドキュメント検索
mcp__next-devtools__nextjs_docs({
  query: "async params searchParams",
  category: "api-reference"
})

// サーバー検出
mcp__next-devtools__nextjs_runtime({
  action: "discover_servers"
})

// 利用可能なツールをリスト
mcp__next-devtools__nextjs_runtime({
  action: "list_tools"
})

一般的なユースケース

公式ドキュメントに基づく

1. エラー診断

ハイドレーションエラー、ビルド失敗、ランタイム問題の特定と修正。

// すべての現在のエラーを取得
const errors = await call_tool("get_errors")
// 分析と修正を提供

2. コンテキストを考慮した提案

既存構造に基づいて新機能の最適な場所を推奨。

// プロジェクトメタデータを取得
const metadata = await call_tool("get_project_metadata")
// 新機能の最適な場所を提案

3. ライブ状態クエリ

開発中の現在の設定、ルート、ミドルウェアを確認。

// 特定ルートのページメタデータを取得
const pageInfo = await call_tool("get_page_metadata", { path: "/​dashboard" })

4. アプリアーキテクチャの理解

どのページとレイアウトが任意の時点でレンダリングされるかを判断。

// ルート構造を検査
const metadata = await call_tool("get_project_metadata")
// page/​layout階層を理解

5. ガイド付きアップグレード

ステップバイステップの指示でバージョン移行を支援。

// アップグレードドキュメントを検索
mcp__next-devtools__nextjs_docs({
  query: "migrate to Next.js 16",
  category: "guides"
})

どちらを使うか

組み込みMCPサーバー

特定のランタイムクエリに使用

• 現在のエラー取得
• ログチェック
• ページ/プロジェクトメタデータの検査
• Server Actionsのデバッグ

next-devtools-mcp

ドキュメントとガイダンスに使用

• Next.jsドキュメント検索
• パターンとベストプラクティスの学習
• 高レベルランタイム概要の取得

両方を併用（推奨）

包括的な開発サポートのために組み合わせる

1. 学習とドキュメントにはnext-devtools-mcpを使用
2. 特定のランタイム検査には組み込みMCPを使用

要件

• Next.js 16+（組み込みMCPがデフォルトで有効）
• 開発サーバーが起動中（npm run dev）
• next-devtools-mcpパッケージ（オプション、高レベル機能用）

ベストプラクティス

1. 最初に開発サーバーを起動: MCPには実行中のサーバーが必要
2. 両方のMCPサーバーを使用: 補完的な機能
3. 定期的にエラーをチェック: プロアクティブなデバッグのために get_errors
4. 実装前に検査: 最初にプロジェクト構造を確認
5. ドキュメントと組み合わせる: ドキュメント検索 + ランタイム検査

重要な注意事項

• 組み込みMCPはNext.js 16+でデフォルト有効
• MCPツールは開発中のライブ状態を提供
• 両方のMCPサーバーは補完的に動作（低レベル + 高レベル）
• 開発モードが必要（本番環境にはMCPサーバーなし）