nextjs-devtools
Inspecter et déboguer les applications Next.js
Le développement Next.js nécessite une visibilité sur les routes, les composants et la configuration de build. Cette compétence fournit des outils basés sur MCP pour inspecter la structure de votre application Next.js, déboguer les problèmes de routage et examiner les paramètres de build directement depuis votre assistant IA.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"nextjs-devtools" 사용 중입니다. Utilise list-routes pour me montrer toutes les routes dans cette application Next.js.
예상 결과:
- Routes trouvées : 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" 사용 중입니다. Utilise list-components pour me montrer tous les composants React dans cette application.
예상 결과:
- Composants trouvés : 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)
품질 점수
만들 수 있는 것
Déboguer les problèmes de routage
Lister toutes les routes et vérifier leurs configurations lorsque les routes ne se comportent pas comme prévu.
Inspecter les routes API
Examiner les gestionnaires de routes API et leur structure pour comprendre l'organisation des points d'accès backend.
Exploration des composants
Trouver et cataloguer les composants React dans l'application pour le refactoring ou la révision.
이 프롬프트를 사용해 보세요
Utilise list-routes pour me montrer toutes les routes dans cette application Next.js.
Utilise get-route-info avec le paramètre de route pour vérifier le point d'accès /api/users.
Utilise get-build-info et get-config pour vérifier mes paramètres de build Next.js.
Utilise list-components pour me montrer tous les composants React dans cette application.
모범 사례
- Exécutez depuis le répertoire racine de votre projet Next.js
- Exécutez next build avant de vérifier les informations de build
- Utilisez des chemins de routes spécifiques avec get-route-info pour des informations détaillées
- Combinez les outils comme list-routes puis get-route-info pour un débogage complet
피하기
- Exécuter dans un projet React simple sans structure Next.js
- S'attendre à ce que la découverte de composants fonctionne avant que l'application ne soit buildée
- Utiliser les outils sans être dans un répertoire de projet Next.js
- Compter sur les informations de build sans d'abord exécuter next build