🛠️ 開発・MCP コミュニティ

nextjs-devtools

Next.jsで開発されたアプリケーションのルーティングやコンポーネント構造、ビルド情報を確認し、デバッグ作業を効率的に進めるための開発支援ツールを活用するSkill。

📜 元の英語説明(参考)

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nextjs-devtools.zip https://jpskill.com/download/16867.zip && unzip -o nextjs-devtools.zip && rm nextjs-devtools.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16867.zip -OutFile "$d\nextjs-devtools.zip"; Expand-Archive "$d\nextjs-devtools.zip" -DestinationPath $d -Force; ri "$d\nextjs-devtools.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して nextjs-devtools.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → nextjs-devtools フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 3

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Next.js DevTools

MCPサーバー経由でNext.jsアプリケーションを検査およびデバッグします。

クイックスタート

# サーバーを起動します（オンデマンドで起動します）
bash scripts/start-server.sh

# または、mcp-client経由で直接使用します
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

利用可能なツール

Tool	Description
`list-routes`	すべてのアプリルートを取得します
`get-route-info`	特定のルートの詳細を取得します
`list-components`	アプリ内のReactコンポーネントを取得します
`get-build-info`	ビルド構成を取得します
`get-config`	next.config.jsの設定を取得します

ワークフローパターン

パターン1：ルートの検査

# すべてのルートをリスト表示します
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

# 特定のルートの詳細を取得します
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-route-info \
  -p '{"route": "/api/auth"}'

パターン2：ビルドの問題のデバッグ

# ビルド構成を確認します
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-build-info

# next.config.jsを確認します
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-config

パターン3：コンポーネントの検出

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-components

スクリプト

start-server.sh

永続的なサーバーの場合（複数回の呼び出し）：

bash scripts/start-server.sh
# サーバーはデフォルトのポートで実行されます
# -sの代わりに-uフラグを指定してmcp-client.pyを使用します

オンデマンド（推奨）

単一の呼び出しの場合、呼び出しごとにサーバーを起動する-sフラグを使用します。

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t <tool-name>

トラブルシューティング

Issue	Solution
サーバーが起動しない	`npx next-devtools-mcp@latest`が手動で動作することを確認してください
ルートが見つからない	Next.jsプロジェクトのルートから実行されていることを確認してください
ビルド情報が空である	最初に`next build`を実行してください

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Next.js DevTools

Inspect and debug Next.js applications via MCP server.

Quick Start

# Start server (spawns on-demand)
bash scripts/start-server.sh

# Or use directly via mcp-client
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

Available Tools

Tool	Description
`list-routes`	Get all app routes
`get-route-info`	Details for specific route
`list-components`	React components in app
`get-build-info`	Build configuration
`get-config`	next.config.js settings

Workflow Patterns

Pattern 1: Route Inspection

# List all routes
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

# Get specific route details
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-route-info \
  -p '{"route": "/api/auth"}'

Pattern 2: Debug Build Issues

# Check build config
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-build-info

# Check next.config.js
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-config

Pattern 3: Component Discovery

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-components

Scripts

start-server.sh

For persistent server (multiple calls):

bash scripts/start-server.sh
# Server runs on default port
# Use mcp-client.py with -u flag instead of -s

On-Demand (Recommended)

For single calls, use -s flag which spawns server per-call:

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t <tool-name>

Troubleshooting

Issue	Solution
Server not starting	Check `npx next-devtools-mcp@latest` works manually
No routes found	Ensure running from Next.js project root
Build info empty	Run `next build` first

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。

📄 SKILL.md (2,272 bytes)
📎 scripts/mcp-client.py (16,775 bytes)
📎 scripts/start-server.sh (266 bytes)