Next API Capture – voir dans les DevTools les « API appelées depuis le serveur » de l’App Router

Quand on développe avec le Next.js App Router, les fetch effectués lors du rendu RSC, dans les route handlers ou les server actions n’apparaissent pas dans l’onglet Network du navigateur, ce qui rend le débogage des données initiales frustrant.
Comme ils sont appelés depuis le serveur, ils ne sont pas visibles dans Network, et une fois déployé c’est encore plus opaque.
J’ai créé cet outil pour pouvoir les voir.

Contenu principal

• Capture non seulement les fetch côté serveur, mais aussi les appels Node http/https (axios · got · node-fetch) en les hookant
• Regroupe les captures par navigation (changement de page) et les affiche dans un panneau DevTools
  — server (rsc/route-handler/action) et client (fetch/xhr) sur un seul écran
• En-têtes de requête/réponse + corps (décompression automatique gzip · deflate · br) · recherche/filtre · redimensionnement du panneau
• « Observe » le flux de réponse sans le « consommer », donc ne casse pas les requêtes réelles (multi-listener EventToEmitter)
• Valeurs sûres par défaut : pas d’activation automatique en production · masquage des en-têtes sensibles · limite de taille du corps ·
  fonctionnement uniquement en loopback (127.0.0.1) → les données ne quittent pas la machine locale
• L’intégration ne touche qu’à 3 endroits : instrumentation.ts / middleware.ts / chargement de l’extension Chrome

Utilisation

• Bibliothèque : npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Extension Chrome : actuellement en cours de validation sur le Web Store — en attendant, utilisation via « load unpacked » depuis le repo
• Démo/guide d’installation : https://next-api-capture-playground.vercel.app/

La cause était que seul fetch était hooké, tandis que axios (node:http) restait invisible. J’ai donc patché aussi la couche http et structuré cela sous forme de bibliothèque. Les retours sont les bienvenus.