Next API Capture · DevTools for the App Router

See the API calls your server makes.

In the App Router, data is fetched on the server — RSC renders, route handlers, server actions. Those calls never reach the Network tab. Capture every one, correlated per navigation, beside your client requests, in a DevTools panel.

See a live capture →npm GitHub

API Capture

server:rscGET200/api/products?page=162ms

↑ never appears in the browser Network tab

client:fetchGET200/api/session41ms

Server + client capture

server:rsc · route-handler · action, plus client fetch and XHR — fetch (undici) and axios/got via node:http alike.

DevTools panel

Filter, search, group by navigation, clear-on-nav, and a full request / response detail with headers and bodies.

Safe by default

Never auto-on in production. Sensitive headers masked, bodies size-capped and pattern-redacted.

Drop-in, fail-safe

Three touch-points: instrumentation, middleware, the extension. Feature-detects and degrades — warns, never throws.

Get started

Install the libraryterminal

npm i @shinjinseop/next-api-capture
# or:  pnpm add @shinjinseop/next-api-capture   /   yarn add @shinjinseop/next-api-capture
# peer dependency: next >= 13.4

On npm: @shinjinseop/next-api-capture

Instrument the serverinstrumentation.ts

import { registerCapture } from "@shinjinseop/next-api-capture";

export async function register() {
  // dev by default; never auto-on in production
  await registerCapture();
}

Add the middlewaremiddleware.ts

import { createCaptureMiddleware } from "@shinjinseop/next-api-capture/middleware";

export const middleware = createCaptureMiddleware();

Keep the ws package server-onlynext.config.js

module.exports = { serverExternalPackages: ["ws"] };

Get the DevTools extension

The Chrome extension is pending Web Store review. Until it's listed, load it unpacked: clone the repo, open chrome://extensions, turn on Developer mode, click Load unpacked, and pick the packages/extension/ folder (the one with manifest.json).

Open the panel

Run your app on localhost, open DevTools, choose the “API Capture” panel, and browse — server and client calls stream in, grouped per navigation.

Try the demo scenarios

/server-fetch server:rsc
A fetch during the RSC render — invisible in the Network tab, captured here.
/client-fetch client:fetch route-handler
A browser fetch, plus a POST to a route handler that runs its own upstream fetch.
/actions server:action
A real Server Action — its server-side fetch is classified and captured as an action call.