nextjs-devtools
Inspecter les routes et composants Next.js
Également disponible depuis: Asmayaseen,92Bilal26
Le débogage des applications Next.js est chronophage sans visibilité sur les routes, composants et configuration de build. Cette skill fournit des outils basés sur MCP pour inspecter la structure de l'application, lister les routes, examiner les composants et consulter les informations de build directement depuis Claude.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "nextjs-devtools". List all routes in this Next.js application
Résultat attendu:
- Routes found:
- / (page) - Home page
- /about (page) - About page
- /api/users (api) - User API endpoint
- /api/auth (api) - Authentication API
- /dashboard/[id] (page) - Dynamic dashboard route
- /docs/[...slug] (page) - Catch-all documentation route
Utilisation de "nextjs-devtools". Get details for the /api/users route
Résultat attendu:
- Route: /api/users
- Type: API Route
- Handler: GET, POST
- File: pages/api/users.ts
- Parameters: None
- Body Parse: Yes
Utilisation de "nextjs-devtools". List all components in this application
Résultat attendu:
- Components found:
- - Button (shared/components/Button.tsx)
- - Navbar (shared/components/Navbar.tsx)
- - UserCard (features/users/UserCard.tsx)
- - DashboardLayout (layouts/DashboardLayout.tsx)
Audit de sécurité
Risque faibleLegitimate Next.js development tooling. Static analyzer flagged Python f-strings as cryptographic patterns and subprocess.Popen as dangerous. These are false positives. The skill spawns a trusted MCP server package for Next.js inspection utilities.
Problèmes à risque faible (2)
Facteurs de risque
⚙️ Commandes externes (2)
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Explorer des projets Next.js inconnus
Lorsque vous rejoignez une nouvelle base de code Next.js, utilisez cette skill pour comprendre rapidement la structure des routes, l'organisation des composants et la configuration de build sans lire manuellement chaque fichier.
Déboguer les problèmes de correspondance de routes
Lorsque les routes ne correspondent pas comme prévu, utilisez list-routes et get-route-info pour vérifier quelles routes sont enregistrées et quels gestionnaires existent pour des chemins spécifiques.
Examiner la configuration de build
Avant le déploiement ou lors du dépannage de problèmes de build, inspectez la configuration de build réellement utilisée, incluant les paramètres webpack, les options d'optimisation et les variables d'environnement.
Essayez ces prompts
Use the nextjs-devtools skill to list all routes in this Next.js application. Show me the route paths and their types (page, api, layout).
Use nextjs-devtools to get details about the route at /[path]. Show me the file handler, parameters, and any dynamic segment patterns.
Use the skill to list all React components in this application. Group them by where they are used (pages, layouts, or shared components).
Run get-build-info and get-config to show me the current build configuration. Pay attention to webpack customizations, image optimization settings, and experimental features.
Bonnes pratiques
- Exécutez next build avant d'inspecter les informations de build pour vous assurer que le répertoire .next existe
- Démarrez le serveur MCP une fois et réutilisez-le pour plusieurs requêtes afin de réduire les frais de démarrage
- Utilisez get-route-info après list-routes pour comprendre les gestionnaires et paramètres de routes spécifiques
Éviter
- Utiliser cette skill sur des projets non-Next.js (ne trouvera pas de routes ni d'informations de build)
- S'attendre à des mises à jour en temps réel sans redémarrer le serveur MCP après des modifications de code
- Exécuter list-components sur de très grandes applications sans filtrage peut produire une sortie volumineuse