Next.js ensureStatic — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Will this route pass the build?</h1>
    <p class="pg-sub">
      This is a <b>model</b> of the rules <code>ensureStatic</code> enforces — not a running Next.js build. Toggle
      what a route actually does, then run the simulated build to see exactly which rule it trips, matching the
      framework's own documented validation for <code>ensureStatic = 'navigation'</code>.
    </p>

<div class="banner info show">
      Simulated model — re-implements the documented pass/fail rules in plain JS. No real compiler, no real server.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The four levels (reference)</div>
      <div class="levels" id="levelLegend">
        <div class="level-card" data-lvl="auto"><b>auto</b>No extra requirement. Default.</div>
        <div class="level-card" data-lvl="shell"><b>shell</b>App Shell must be static. Needs Partial Prefetching.</div>
        <div class="level-card" data-lvl="prefetch"><b>prefetch</b>Shell + every per-link prefetch. Needs Partial Prefetching.</div>
        <div class="level-card" data-lvl="navigation"><b>navigation</b>The whole rendered route. Cache Components alone is enough.</div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Build simulator — <code>ensureStatic = 'navigation'</code></div>
      <p class="pg-sub" style="margin-top:0">Toggle what this route segment does, then run the build.</p>
      <div class="checks">
        <label class="toggle">
          <input type="checkbox" id="chkFetch" /><span class="switch"></span>
          <span>Has a <code>fetch()</code> or DB call with no <code>"use cache"</code></span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="chkRuntime" /><span class="switch"></span>
          <span>Reads <code>cookies()</code>, <code>headers()</code>, or server-side <code>searchParams</code></span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="chkShortCache" /><span class="switch"></span>
          <span><code>"use cache"</code> with <code>expire &lt; 5m</code>, <code>stale &lt; 30s</code>, or <code>revalidate: 0</code></span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="chkPromise" /><span class="switch"></span>
          <span>Passes a request-dependent promise into a Client Component</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="chkDynamicNoParams" /><span class="switch"></span>
          <span>Dynamic segment with no (or incomplete) <code>generateStaticParams()</code></span>
        </label>
      </div>
      <div class="btn-row">
        <button class="btn primary" id="runBuild">Run build</button>
        <button class="btn ghost sm" id="resetBuild">Reset</button>
      </div>
      <div class="status" id="buildStatus"><span class="dot"></span> Toggle a condition, or run the build as-is.</div>
      <div class="violation-list" id="violationList"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Inheritance check — layout vs. page</div>
      <p class="pg-sub" style="margin-top:0">A child segment can tighten freely, or export <code>'auto'</code> (which always defers to the parent) — only an explicit, weaker <i>concrete</i> level fails the build.</p>
      <div class="inherit-row">
        <div class="field">
          <span class="ctl-label">Parent layout exports</span>
          <select class="sel" id="parentLvl">
            <option value="auto">auto</option>
            <option value="shell">shell</option>
            <option value="prefetch">prefetch</option>
            <option value="navigation">navigation</option>
            <option value="false">false</option>
          </select>
        </div>
        <div class="field">
          <span class="ctl-label">Child page exports</span>
          <select class="sel" id="childLvl">
            <option value="auto">auto</option>
            <option value="shell">shell</option>
            <option value="prefetch">prefetch</option>
            <option value="navigation" selected>navigation</option>
            <option value="false">false</option>
          </select>
        </div>
        <button class="btn primary sm" id="checkInherit">Check</button>
      </div>
      <div class="status" id="inheritStatus"><span class="dot"></span> Pick a parent and a child, then check.</div>
      <div class="output" id="inheritCaption" style="margin-top:8px;"></div>
    </div>
  </div>

preview

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