Next.js proxy.ts vs middleware.ts — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 proxy.ts vs middleware.ts — the network boundary</h1>
    <p class="pg-sub">
      This is a <strong>model</strong> of the documented behavior, not a live Next.js server.
      Pick which file handles the request, whether the visitor has a session cookie, and whether
      the boundary tries a Node-only API — then send the request and watch where it goes.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>

<div class="addr">
        <span class="dots"><span></span><span></span><span></span></span>
        <code>https://app.example.com/dashboard</code>
      </div>

<div class="wrap-controls">
        <div class="field">
          <span class="ctl-label">Boundary file</span>
          <div class="seg" id="fileSeg">
            <button aria-pressed="true" data-file="proxy">proxy.ts (Node.js)</button>
            <button aria-pressed="false" data-file="middleware">middleware.ts (Edge)</button>
          </div>
        </div>
      </div>

<div class="btn-row" style="margin-top:12px">
        <label class="toggle">
          <input type="checkbox" id="hasCookie" checked /><span class="switch"></span>
          <span>Visitor has a valid session cookie</span>
        </label>
      </div>
      <div class="btn-row" style="margin-top:8px">
        <label class="toggle">
          <input type="checkbox" id="usesNodeApi" /><span class="switch"></span>
          <span>Boundary calls a Node-only API (e.g. <code>crypto.createHmac</code>)</span>
        </label>
      </div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="send">Send request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="guest">Guest visits /dashboard</button>
        <button class="btn sm" data-preset="authed">Signed-in visits /dashboard</button>
        <button class="btn sm" data-preset="nodeapi">Old middleware.ts tries a Node API</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Request path (model)</div>
      <div class="flow" id="flow">
        <div class="box" id="boxRequest"><span class="ico">📨</span>Request<span class="sub">GET /dashboard</span></div>
        <div class="box" id="boxBoundary"><span class="ico">🛡️</span>Boundary<span class="sub" id="boundarySub">proxy.ts — Node.js runtime</span></div>
        <div class="arrow" id="arrowText">↓</div>
        <div class="box wide" id="boxOutcome"><span class="ico">…</span><span id="outcomeText">Waiting to send</span></div>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — configure the request and send it.</span>
      </div>
      <p class="hint" id="hint">Pick a file, a cookie state, and whether the check reaches for a Node-only API, then send.</p>

preview

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