nextjs-devtools
Inspeccionar y depurar aplicaciones Next.js
El desarrollo con Next.js requiere visibilidad de rutas, componentes y configuración de compilación. Esta skill proporciona herramientas basadas en MCP para inspeccionar la estructura de tu app Next.js, depurar problemas de enrutamiento y examinar ajustes de compilación directamente desde tu asistente de IA.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「nextjs-devtools」を使用しています。 Use list-routes to show me all routes in this Next.js application.
期待される結果:
- Routes found: 8
- / (page.tsx) - Static
- /about (page.tsx) - Static
- /api/users (route.ts) - Dynamic API
- /api/posts (route.ts) - Dynamic API
- /dashboard (page.tsx) - Dynamic
- /blog/[slug] (page.tsx) - Dynamic catch-all
「nextjs-devtools」を使用しています。 Use list-components to show me all React components in this application.
期待される結果:
- Components found: 15
- Button (components/ui/Button.tsx)
- Header (components/layout/Header.tsx)
- Footer (components/layout/Footer.tsx)
- UserCard (components/user/UserCard.tsx)
セキュリティ監査
低リスクLegitimate Next.js development tool. Uses subprocess.Popen to spawn MCP servers (intentional design for stdio transport), HTTP requests to local MCP endpoints (standard MCP protocol), and shell scripts for server startup. All capabilities match the stated purpose. The static analyzer flagged 'weak cryptographic algorithm' on 38 locations - these are false positives from misidentified Python builtins (str, len, list, set, type). The skill-report.json previously audited this as low risk with no confirmed malicious patterns.
高リスクの問題 (1)
リスク要因
⚡ スクリプトを含む (1)
🌐 ネットワークアクセス (1)
⚙️ 外部コマンド (1)
品質スコア
作れるもの
Depurar problemas de enrutamiento
Listar todas las rutas y comprobar sus configuraciones cuando las rutas no se comportan como se espera.
Inspeccionar rutas de API
Revisar los manejadores de rutas de API y su estructura para entender la organización de endpoints del backend.
Exploración de componentes
Encontrar y catalogar componentes React en toda la aplicación para refactorización o revisión.
これらのプロンプトを試す
Use list-routes to show me all routes in this Next.js application.
Use get-route-info with route parameter to check the /api/users endpoint.
Use get-build-info and get-config to check my Next.js build settings.
Use list-components to show me all React components in this application.
ベストプラクティス
- Ejecuta desde el directorio raíz de tu proyecto Next.js
- Ejecuta next build antes de consultar la información de compilación
- Usa rutas específicas con get-route-info para obtener información detallada
- Combina herramientas como list-routes y luego get-route-info para una depuración integral
回避
- Ejecutarlo en un proyecto React simple sin estructura de Next.js
- Esperar que el descubrimiento de componentes funcione antes de que la app esté compilada
- Usar herramientas sin estar en un directorio de proyecto Next.js
- Confiar en la información de compilación sin ejecutar primero next build