Que fait next-browser ?
CLI qui offre aux agents ce que les humains obtiennent des React DevTools et du overlay de développement Next.js — arbres de composants, props, hooks, shells PPR, erreurs, réseau — sous forme de commandes shell renvoyant du texte structuré.
Fonctionnalités principales
- Arbre de composants : Extrait la hiérarchie complète des composants React avec leurs noms et état.
- Props et hooks : Affiche les props actuelles et l'état des hooks pour chaque nœud.
- Shells PPR : Identifie les shells de rendu partiel (Partial Prerendering) dans les routes dynamiques.
- Erreurs : Récupère les erreurs de build et de runtime directement depuis le overlay dev.
- Réseau : Liste les appels réseau, les chargements de données et les requêtes API.
Utilisation
npx vercel-labs/next-browser inspect
npx vercel-labs/next-browser tree
npx vercel-labs/next-browser errors
npx vercel-labs/next-browser network
Prérequis
- Application Next.js en cours d'exécution en mode développement (port 3000 par défaut).
- Node.js 18+.
Exemples de sortie
{
"component": "Page",
"props": {
"params": { "id": "123" },
"searchParams": {}
},
"hooks": {
"useRouter": { "pathname": "/product/123" },
"useState": { "count": 0 }
},
"errors": []
}
Intégration avec un agent Claude Code
Ajoutez cette instruction à la configuration de votre agent :
Utilisez
vercel-labs/next-browserpour inspecter l'état de l'application Next.js, déboguer les erreurs et analyser les arbres de composants sans interface graphique.
Licence
MIT