技能 nextjs-devtools
🔧

nextjs-devtools

中风险 ⚡ 包含脚本⚙️ 外部命令🌐 网络访问

Debug Next.js-Anwendungen mit MCP-Tools

也可从以下获取: 92Bilal26,Asmayaseen

Das Debuggen komplexer Next.js-Anwendungen erfordert das Überprüfen von Routen, Komponenten und Build-Konfigurationen. Diese Skill bietet MCP-basierte Tools zum Auflisten von Routen, Untersuchen von Komponenten und Überprüfen von Build-Informationen direkt aus Ihrer Entwicklungsumgebung.

支持: Claude Codex Code(CC)
⚠️ 61 差
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“nextjs-devtools”。 Alle Routen in dieser Next.js-Anwendung auflisten

预期结果:

  • Routes found:
  • / - Page (SSR)
  • /about - Page (SSR)
  • /api/auth - API Route (POST, GET)
  • /api/users - API Route (GET, POST)
  • /dashboard - Page (SSR)
  • /dashboard/settings - Page (SSR)

安全审计

中风险
v3 • 1/10/2026

This skill provides Next.js development tooling through an MCP client that connects to the next-devtools-mcp server. It includes a generic MCP client script capable of executing user-provided commands via subprocess and shell, which is necessary for MCP functionality but introduces execution risk. All capabilities align with the stated purpose of Next.js development tooling.

3
已扫描文件
605
分析行数
5
发现项
3
审计总数
中风险问题 (1)
scripts/mcp-client.py:204-212
Subprocess shell execution with user-provided commands
The StdioTransport class in mcp-client.py uses subprocess.Popen with shell=True to execute commands (line 204-212). The command is passed via the --stdio/-s CLI argument. While this is necessary for MCP stdio transport functionality, shell=True can enable command injection if input is not properly validated. An attacker who controls the command argument could execute arbitrary shell commands. Relevant code: ```python self._process = subprocess.Popen( self.command, shell=True, stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True, bufsize=1 ) ```
低风险问题 (1)
scripts/start-server.sh:8
Downloads and executes npm package at runtime
The start-server.sh script executes `npx next-devtools-mcp@latest` which downloads and runs an external npm package. While this is expected behavior for MCP tooling, it involves dynamic code execution from npm registry without integrity verification. Users should only install trusted packages.

风险因素

⚡ 包含脚本 (1)
scripts/start-server.sh:1-11
⚙️ 外部命令 (1)
scripts/mcp-client.py:204-212
🌐 网络访问 (1)
scripts/mcp-client.py:42-182
审计者: claude 查看审计历史 →

质量评分

45
架构
100
可维护性
81
内容
21
社区
58
安全
78
规范符合性

你能构建什么

Anwendungsstruktur untersuchen

Alle Routen und Komponenten in einem Next.js-Projekt auflisten, um die App-Architektur schnell zu verstehen.

Build-Konfigurationen debuggen

Build-Einstellungen und next.config.js überprüfen, um Deployments- oder Build-Fehler zu beheben.

Unbekannte Codebasen navigieren

Routen-Hierarchie und Komponenten-Organisation erkunden, um neue Next.js-Projekte effizient zu verstehen.

试试这些提示

Alle Routen auflisten 
Use nextjs-devtools to list all routes in this Next.js application.
Routendetails abrufen 
Get detailed information about the /api/users route including its handler type and parameters.
Build-Konfiguration überprüfen 
Use get-build-info to show the current build configuration for this Next.js project.
Komponenten finden 
List all React components in this application to understand the UI structure.

最佳实践

  • Führen Sie next build vor der Verwendung von get-build-info aus, um sicherzustellen, dass Build-Daten verfügbar sind
  • Führen Sie die Befehle aus dem Next.js-Projektstammverzeichnis aus für genaue Ergebnisse
  • Verwenden Sie zuerst list-routes, um die Anwendungsstruktur zu verstehen, bevor Sie ins Detail gehen

避免

  • Verwendung von nextjs-devtools auf non-Next.js React-Projekten
  • Erwarten von Echtzeit-Updates ohne Aktualisierung der Build-Daten
  • Ausführen der Skill außerhalb eines Next.js-Projektverzeichnisses

常见问题

Funktioniert dies mit Next.js 13+ App Router?
Ja, es unterstützt sowohl App Router als auch Pages Router Konfigurationen.
Welche Next.js-Versionen werden unterstützt?
Funktioniert mit Next.js 12, 13, 14 und 15 bei Verwendung der neuesten next-devtools-mcp.
Kann ich dies mit einem lokalen MCP-Server verwenden?
Ja, verwenden Sie mcp-client.py mit dem --url-Flag, um eine Verbindung zu einem beliebigen laufenden MCP-Server herzustellen.
Sind meine Projektdaten bei dieser Skill sicher?
Die Skill liest nur Projektdateien zur Inspektion. Es werden keine Daten an externe Server gesendet.
Warum wird keine Route gefunden?
Stellen Sie sicher, dass Sie aus dem Next.js-Projektstammverzeichnis ausführen und das .next-Verzeichnis existiert.
Wie unterscheidet sich dies von der direkten Verwendung von npx?
Diese Skill bietet integrierten Zugriff durch MCP für KI-Assistenten mit strukturierter Ausgabe.

开发者详情

作者

92Bilal26

许可证

MIT

仓库

https://github.com/92Bilal26/TaskPilotAI/tree/main/.claude/skills/nextjs-devtools

引用

main

文件结构

📁 scripts/

📄 mcp-client.py

📄 start-server.sh

📄 SKILL.md