Demo

Next-Router-State-Tree explorer

Soft-navigate between the routes below. The panel on the right intercepts every RSC fetch and decodes the Next-Router-State-Tree the browser attaches. Hard-load any URL — no fetch happens, so nothing is captured.

The Nicobar pigeon, briefly

Caloenas nicobarica is the closest living relative of the dodo. It carries a mane of iridescent green-and-copper hackles around the neck and a startlingly white tail. The species ranges across small islands from the Andaman and Nicobar group east to the Solomons and Palau, and flies in single-file columns between roosting and feeding islands at dawn and dusk.

What this section demonstrates

  • Clicking any Link in the sidebar triggers a soft navigation: Next fetches an RSC payload with the current Next-Router-State-Tree attached. The panel on the right monkey-patches window.fetch to intercept those requests and decode the header.
  • The captured tree describes where the browser thinks it is before the navigation, not the destination. The server uses it to decide which subtree to re-render.
  • Segment encoding varies by route shape — static names are bare strings, [slug] becomes [name, value, "d"], required catch-all uses "c", and optional catch-all uses "oc".
  • Why client-side and not headers()? Next strips rsc, next-router-state-tree, next-router-prefetch, and next-router-segment-prefetch from the request before middleware or route handlers can see them. Only next-url survives. The browser is the only place to observe the rest.

Try this

  1. Click Nicobar Pigeon. The captured tree shows the overview's state (no species yet) — that's what the browser had when the click happened.
  2. Click Spotted — now the captured tree contains ["slug", "nicobar", "d"]. Click Kanaka — captures show ["slug", "spotted", "d"].
  3. Walk into a habitat path — optional catch-all renders as ["region", ".../...", "oc"].
  4. Hard-reload any URL — no RSC fetch happens, nothing gets captured. The header only exists for soft navigation.