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

> Clean Markdown view of GeekNews topic #30783. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=30783](https://news.hada.io/topic?id=30783)
- GeekNews Markdown: [https://news.hada.io/topic/30783.md](https://news.hada.io/topic/30783.md)
- Type: show
- Author: [yeo1120](https://news.hada.io/@yeo1120)
- Published: 2026-06-24T10:08:45+09:00
- Updated: 2026-06-24T10:08:45+09:00
- Original source: [github.com/yeo11200](https://github.com/yeo11200/next-api-capture)
- Points: 1
- Comments: 0

## Topic Body

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 계층까지 패치해  
  라이브러리로 정리했습니다. 피드백 환영합니다.

## Comments



_No public comments on this page._