Adopt Next.js Instant Navigations: Per‑Route Playbook

Next.js Instant Navigations enable a site to feel responsive by committing the App Shell promptly when users click, with personalized or slow content streaming in behind Suspense boundaries. Focusing on high-traffic routes like search, product lists, and dashboards, converting a single route to an instant navigation can be achieved with a single deploy and results in noticeable UX and Core Web Vitals improvements.

In this guide, a practical per-route process is outlined to transform a slow route into an instant navigation, including minimal configuration, code examples, a Playwright guard, and common pitfalls to avoid.

The per-route checklist is straightforward:

1. Enable Cache Components: Activate the Cache Components flag and Partial Prefetching, if desired, in your next.config file. This will enable the server to prerender a static shell for each route, aiming for it to be as meaningful as possible.

2. Annotate the Shell: Use the `use cache` directive on functions that perform cacheable fetches. Keep runtime-only reads (like cookies(), headers(), searchParams, and connection) inside Suspense boundaries to maintain a deterministic shell.

3. Partial Prefetching: Implement partial prefetching for URL-dependent data and `use cache: private + prefetch = allow-runtime` for cookie/session-driven UI. This allows for efficient server invocations when the user experience gain is significant.

4. Testing: Validate UX with the `instant()` Playwright helper. This process should be applied route-by-route, keeping the blast radius small and metrics clear for future reuse.