mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Sam SelikoffandGitHub
19a19a3924
Updates the Instant Navs devtools functionality to use a panel and show you two options for capturing the SSR shell or the prefetch for a Client navigation. Replaces current functionality where clicking Instant Navs changed the devtools indicator to a blue pending state awaiting the user's next navigation. https://github.com/user-attachments/assets/de5c5a40-e836-4719-9517-6d5c6b0aef2c
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div>
|
|
<h1 data-testid="home-title">Instant Navigation Mode Demo</h1>
|
|
<p>
|
|
This fixture tests the <strong>Instant Navigation Mode</strong> toggle
|
|
in Next.js Dev Tools. When enabled, navigations show only the cached or
|
|
prefetched state — dynamic data is not streamed.
|
|
</p>
|
|
<h2>How to test</h2>
|
|
<ol>
|
|
<li>
|
|
Open <strong>Next.js Dev Tools</strong> (click the Next.js logo in the
|
|
corner).
|
|
</li>
|
|
<li>
|
|
Toggle <strong>Instant Navigation Mode</strong> to <em>On</em>. The
|
|
indicator turns blue.
|
|
</li>
|
|
<li>
|
|
Click the link below. You should see the loading skeleton instead of
|
|
the final page content.
|
|
</li>
|
|
<li>
|
|
Click the blue <em>Instant UI only</em> indicator to unblock dynamic
|
|
data and resume normal navigation.
|
|
</li>
|
|
</ol>
|
|
<nav style={{ marginTop: '1.5rem' }}>
|
|
<Link
|
|
href="/target-page/my-post?search=foo"
|
|
id="link-to-target"
|
|
style={{
|
|
display: 'inline-block',
|
|
padding: '0.5rem 1rem',
|
|
background: '#0070f3',
|
|
color: '#fff',
|
|
borderRadius: 6,
|
|
textDecoration: 'none',
|
|
}}
|
|
>
|
|
Go to target page →
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|