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）を1画面に
• リクエスト/レスポンスヘッダー + ボディ（gzip・deflate・br を自動展開）・検索/フィルター・パネルのリサイズ
• レスポンスストリームを「消費」せず「観察」するため、実際のリクエストを壊さない（EventToEmitter マルチリスナー）
• 安全なデフォルト: 本番環境で自動 ON にならない・機微なヘッダーをマスク・ボディサイズ上限あり・
  loopback（127.0.0.1）でのみ動作 → データがローカルの外に出ない
• 連携箇所は3つだけ: instrumentation.ts / middleware.ts / Chrome 拡張の読み込み

使い方

• ライブラリ: npm i @shinjinseop/next-api-capture（peer: next >= 13.4, MIT）
• Chrome 拡張: 現在 Web Store の審査中 — それまでは repo から「load unpacked」で利用
• デモ/インストールガイド: https://next-api-capture-playground.vercel.app/

原因は「fetch だけをフックしていて axios（node:http）は見られない」ことでした。そこで http レイヤーまでパッチして、
ライブラリとして整理しました。フィードバック歓迎です。