Next.js Instant Navigations — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Watch a navigation go through three stages</h1>
    <p class="pg-sub">
      This is a <b>model</b> of how Next.js's Instant Navigations (Partial Prefetching + the App Shell) decide what
      paints instantly versus what streams in after a click — not a running Next.js server. Pick whether Partial
      Prefetching is on, pick where the <code>params</code> are awaited, then click the link to simulate the
      navigation.
    </p>

<div class="banner info show">
      Simulated model — walks the documented navigation-stage rules in plain JS. No real server, no real request. Timings are illustrative only.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Partial Prefetching</span>
          <div class="seg" id="ppSeg">
            <button type="button" aria-pressed="false" data-val="off">Off (16.2 and earlier default)</button>
            <button type="button" aria-pressed="true" data-val="on">On (16.3+)</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Where <code>params</code> is awaited</span>
          <div class="seg" id="placementSeg">
            <button type="button" aria-pressed="false" data-val="above">Above Suspense (wrong)</button>
            <button type="button" aria-pressed="true" data-val="inside">Inside Suspense (correct)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px;">
        <button class="btn primary" id="navigateBtn">Click the &lt;Link href="/reports/42"&gt;</button>
        <button class="btn ghost sm" id="resetBtn">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What the browser paints</div>
      <div class="timeline">
        <span><span class="stage-dot" id="dotShell"></span><b>Stage 1</b> App Shell</span>
        <span><span class="stage-dot" id="dotPrefetch"></span><b>Stage 2</b> per-link prefetch</span>
        <span><span class="stage-dot" id="dotNav"></span><b>Stage 3</b> navigation / stream</span>
      </div>
      <div class="route">
        <div class="block" id="headerBlock">
          <span class="ico">🧭</span>
          Header + sidebar
          <span class="tag" id="headerTag">waiting</span>
        </div>
        <div class="block" id="reportBlock">
          <span class="ico">📄</span>
          Report #42
          <span class="tag" id="reportTag">waiting</span>
        </div>
      </div>
      <div class="status" id="status"><span class="dot"></span> Click the link above to simulate a navigation.</div>
      <div class="output" id="caption" style="margin-top:8px;"></div>
    </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.