Show GN: Next API Capture – App Router의 '서버에서 부르는 API'를 DevTools에서 보기

Next.js App Router로 개발하다 보면 RSC 렌더 · 라우트 핸들러 · 서버 액션에서 일어나는 fetch가
브라우저 Network 탭에 안 보여서 초기 데이터 디버깅이 답답합니다. 서버에서 호출하니 Network엔
안 잡히고, 배포되면 더 깜깜하죠. 그걸 보려고 만들었습니다.

주요 내용

• 서버 측 fetch뿐 아니라 Node http/https(axios·got·node-fetch)까지 후킹해서 캡처
• 캡처를 navigation(페이지 이동) 단위로 묶어 DevTools 패널에 표시
  — server(rsc/route-handler/action)와 client(fetch/xhr)를 한 화면에
• 요청/응답 헤더 + 바디(gzip·deflate·br 자동 해제) · 검색/필터 · 패널 리사이즈
• 응답 스트림을 '소비'하지 않고 '관찰'해서 실제 요청을 깨지 않음(EventToEmitter 멀티 리스너)
• 안전 기본값: 프로덕션 자동 ON 안 됨 · 민감 헤더 마스킹 · 바디 사이즈 캡 ·
  loopback(127.0.0.1)에서만 동작 → 데이터가 로컬을 벗어나지 않음
• 연동은 3곳뿐: instrumentation.ts / middleware.ts / 크롬 확장 로드

사용

• 라이브러리: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• 크롬 확장: 현재 웹스토어 심사 중 — 그동안은 repo에서 'load unpacked'로 사용
• 데모/설치 가이드: https://next-api-capture-playground.vercel.app/

원인이 'fetch만 후킹하고 axios(node:http)는 못 본다'였습니다. 그래서 http 계층까지 패치해
라이브러리로 정리했습니다. 피드백 환영합니다.