DEV Community

Anup Karanjkar
Anup Karanjkar

Posted on Originally published at wowhow.cloud

Next.js 16.3 Instant Navigations — Partial Prefetching Guide

Next.js 16.3 is the biggest release since 16.0 and it is two things at once. For every app, with no code change: up to 90% less dev-server memory, filesystem-cached builds that ran 5.5× faster on Vercel's own projects, native Node.js streams for up to 22% more requests under load, and a version-matched AGENTS.md block written by next dev so coding agents read the right docs. For apps that opt in: Instant Navigations — Partial Prefetching plus Cache Components — which gives you SPA-feel navigations without giving up Server Components. Enable both with cacheComponents: true and partialPrefetching: true in next.config.ts. Patch floor: 16.3.3 (Active LTS) or 15.5.24 (Maintenance LTS) after the August security release.

We run wowhow.cloud on the App Router with Cache Components already on, so this is written from the migration side rather than the greenfield side. Facts below are from the Next.js 16.3 release post (3 August 2026) and the Instant Navigations preview post that preceded it.

Upgrade first, opt in second

npm install next@latest gets you the free wins. In order of how much you will notice them:

Dev memory. Turbopack's disk cache (introduced in 16.1) and a new memory-eviction pass are both on by default. Vercel's dashboard went from 21.5 GB to 2 GB after compiling 50 routes; nextjs.org from 4,600 MB to 840 MB. If you have been restarting next dev every hour on a big monorepo, this is the release that stops that.

Build cache. The same disk cache now applies to next build, on by default. Cold vs cached: nextjs.org 21s to 9.2s; vercel.com/geist 30s to 5.5s. On CI this only pays off if your cache directory persists between runs — check your pipeline restores .next/cache.

Native streams. The rendering layer swapped web streams for Node streams and dropped the conversion overhead; Vercel measured up to 22% more requests handled under load with no application changes. For a self-hosted Docker deploy like ours, that is a free capacity bump.

TypeScript 7. Add typescript@^7 and next build uses the native, roughly 10× faster type checker. Zero config beyond the dependency bump.

Prefetch inlining. Small prefetch payloads are now bundled together; large shared segments stay separate so they can be reused across routes. Fewer requests in the waterfall, nothing to change.

Three new APIs worth adopting immediately

Root params. import { lang } from 'next/root-params' reads a root-level dynamic segment like [lang] from any Server Component, no prop drilling, and it works inside 'use cache' scopes. Server Components only for now; route handlers and Server Actions are promised later.

Custom error boundaries. catchError from next/error gives you an error boundary that does not swallow notFound() or redirect() and receives a retry() function that re-fetches the boundary's children — including re-rendering failed Server Components. Every hand-rolled "try again" boundary we have written against the App Router was working around exactly those two gaps.

Glob imports. import.meta.glob('./posts/*.md', { eager: true }) is now supported by Turbopack with the Vite-compatible signature, with HMR for Server Components that read local files. If you keep content as files instead of a database, this replaces a lot of fs.readdirSync.

Instant Navigations: what it actually is

The problem it solves is old: Server Components made complete pages fast to render but navigations feel slow, because the client had nothing to show until the server answered. loading.tsx per route was the fix, and it was easy to forget one and ship a blocking navigation.

16.3 flips the default. Any component that renders dynamic UI either declares an inline loading state with Suspense or marks part of itself prerenderable with 'use cache'; Next.js extracts that shell and, with Partial Prefetching, ships it to the browser before the click. Per-link, <Link prefetch={true}> can include as much or as little of the target page as you want. The behaviours sit behind two flags today and are slated to become defaults in a future major:

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
}

export default nextConfig
Enter fullscreen mode Exit fullscreen mode

Four tools ship alongside the behaviour, and they are the reason to do this now rather than wait for the default:

Instant Insights is a DevTools panel that lists every navigation you perform that was not instant, with a prompt you can hand to your agent to apply the fix. Navigation Inspector pauses a navigation at the shell so you can see exactly what the user sees before data streams in — development disables prefetching, so this was previously guesswork. Better ISR means a route you did not prerender at build serves an instant shell to its first visitor and upgrades to the fully prerendered page in the background. And the instant() Playwright helper lets you assert what must be visible before any network round-trip:

import { expect, test } from '@playwright/test'
import { instant } from '@next/playwright'

test('product title is instant', async ({ page }) => {
  await page.goto('/products/shoes')
  await instant(page, async () => {
    await page.click('a[href="/products/hats"]')
    await expect(page.locator('h1')).toContainText('Baseball Cap')
    await expect(page.getByText('Checking inventory...')).toBeVisible()
  })
  await expect(page.getByText('12 in stock')).toBeVisible()
})
Enter fullscreen mode Exit fullscreen mode

That test fails the moment someone adds a cookies() call to a shared header and de-opts the route to request time, or moves a Suspense boundary during a refactor. It turns "this page used to feel fast" into a CI failure.

Migration notes from a Cache Components site

If you are already on cacheComponents: true (we have been since 16.0, and the rules that came out of it are in our 16.2 devtools guide), adding partialPrefetching: true is mostly safe and mostly reveals existing problems. Things to check:

Every 'use cache' page needs a cacheTag you can actually revalidate; a shell that gets prefetched from a stale cache entry is now a stale shell the user sees before the click. Audit routes with generateStaticParams that only prerender a subset — the new ISR behaviour changes what the first visitor of an un-prerendered slug sees, for the better, but your monitoring may have been treating that first hit as a slow page. And go through the Instant Insights panel on your ten most-navigated routes before shipping; on our tools listing it flagged one client-only hero that hydrated after the shell, which was invisible in Lighthouse and obvious in the panel.

Two experimental flags are also in 16.3 and worth a branch: experimental.turbopackRustReactCompiler runs the React Compiler inside Turbopack instead of Babel (v0 measured 34% faster cold and 46% faster warm to a ready page — only if you have fully left Babel), and experimental.useOffline keeps soft navigations, fetches and Server Actions pending across a dropped connection and retries on reconnect, with a useOffline() hook for a banner.

Agents and the AGENTS.md block

Running next dev now writes and maintains a version-matched AGENTS.md block pointing at the docs bundled in your node_modules. Vercel is retiring the separate Next.js skills that existed only to deliver current docs. If your AGENTS.md already says "this is not the Next.js you know, read node_modules/next/dist/docs first" — ours does — the generated block does the same job automatically and stays correct on every upgrade. Keep your own rules; let the docs pointer be generated. The CLAUDE.md starter templates and the Claude Code Production Pack both ship a Next.js 16 rule file that assumes this block exists.

Quick answers

Do I have to enable Instant Navigations?

No. Everything in 16.3 that is not behind a flag applies on upgrade; Partial Prefetching needs both cacheComponents: true and partialPrefetching: true. Vercel says the behaviours become the default in a future major, so opting in now is a head start rather than a requirement.

Does partialPrefetching work without cacheComponents?

No. Partial Prefetching extracts prerenderable shells from Suspense boundaries and use cache scopes, which only exist under Cache Components. Enable both flags together.

Is TypeScript 7 required for Next.js 16.3?

No. It is an optional dependency bump; if typescript@^7 is installed, next build uses the native checker automatically. TypeScript 5.x continues to work.

What is the minimum safe version after the August security release?

16.3.3 (Active LTS) or 15.5.24 (Maintenance LTS). If you are on any other 16.x or 15.x patch, upgrade before you do anything else in this guide.

What happened to the Next.js skills for coding agents?

Retired. next dev now writes a version-matched AGENTS.md block pointing at the docs in your node_modules, which makes the docs-delivery skills redundant. Skills that encode longer workflows are unaffected.

Before you plan the upgrade sprint, put your team's numbers into the coding assistant ROI calculator — the Instant Insights prompts are the first Next.js feature designed to be executed by an agent rather than read by a person, and the payback is measured in navigations fixed per hour. For what changed between 16.0 and 16.2, start with what's new in Next.js 16. Every product mentioned is available at wowhow.cloud — pay once, ship forever.

Originally published at wowhow.cloud

Top comments (0)