Next.js 16.3 Preview:
Instant Navigations & AI Improvements

Two Major Announcements in One Week

On June 25 and 26, 2026, the Next.js team published two substantial blog posts detailing what's coming in Next.js 16.3. The first — Instant Navigations — addresses the long-standing complaint that Server Components make apps feel unresponsive by introducing Stream, Cache, and Block rendering primitives. The second — AI Improvements — extends the agent-driven development toolchain with AGENTS.md auto-update, first-party Skills, a merged Agent Browser with React introspection, actionable errors with "Copy as prompt," and a focused MCP server.

Both are available today via the @preview npm tag. The stable release is expected in the coming weeks. This article walks through every feature with code examples and practical context.

Part I — Instant Navigations

The Problem: Click, Wait, See

One of the most common frustrations with Next.js apps is that navigations feel slow. In a traditional server-driven app, clicking a link means: nothing happens, the server responds, then the page appears. Compare this to a client-driven SPA where clicking instantly shows a shell of the next page — even if some data is still loading. That instant feedback is what makes SPAs "feel fast."

Next.js 16.3 bridges this gap by shipping opt-in behaviors that give you the best of both worlds: server-driven architecture with SPA-like instant navigations.

Enabling Cache Components

To try the new behaviors, enable the cacheComponents flag in your Next.js config. This flag will become the default in a future major version:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
  // ...
};

export default nextConfig;

Over the past year, the Next.js team has been simplifying the framework back to its roots: dynamic by default with no hidden or implicit caching. This flag enables the new rendering primitives.

Stream, Cache, or Block

When a route awaits some data on the server, you now have three choices:

Here's what a Block route looks like in practice:

// app/blog/[slug]/page.tsx
export const instant = false;

export default async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.content}</article>;
}

For a blog post about a breaking news story, showing a loading shell might feel wrong. Block tells Next.js: "wait for the full page, then navigate." The choice is yours per route.

Partial Prefetching — Reusable Route Shells

Previously, Next.js sent a prefetch request for every link in the viewport. If you had a sidebar with twenty chat links, that was twenty prefetch requests. Many developers found this wasteful — and the team agrees.

In 16.3, with partialPrefetching: true, Next.js prefetches a single reusable shell per route, cached on the client for the session. This is conceptually similar to how SPAs download code with per-route code splitting:

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  // ...
};

One shell for /chat/[id], one shell for /dashboard, and so on. All links to the same route share the same cached shell. This also lays the foundation for offline navigation — prefetched routes could remain navigable when the network briefly disappears, a feature the team is exploring for a future release.

Prefetching More Than a Shell

Sometimes you want more content to appear instantly. For per-link prefetching, opt in with <Link prefetch={true}>. Next.js will render down to what's available synchronously or marked with 'use cache' — not the entire route, but meaningfully more than just the shell:

<Link href="/chat/42" prefetch={true}>Chat #42</Link>

Per-link prefetching is limited to build-time content by default. To extend it to request-time cached content, add export const prefetch = 'allow-runtime' to the route.

Testing Instant Navigations

To catch regressions in your instant routes, Next.js 16.3 provides the instant() test helper from @next/playwright:

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

test('product title is available immediately', 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();
});

Inside the instant() callback, you assert what must be visible without waiting for network roundtrips. Outside it, you assert streamed content. The Navigation Inspector in Next.js DevTools lets you visually inspect what gets prefetched as a shell for any route.

What This Means for Your Next.js App

The v0 team at Vercel has been using these tools during development. Their navigation times dropped significantly once they worked through the Instant Insights fixes. The team plans to share specific adoption patterns in a follow-up post. For a hands-on demo, check out Next Beats — an open-source music player built on the 16.3 Preview with Cache Components and Partial Prefetching enabled, available on GitHub.

Part II — AI Improvements

Next.js has grown a lot since the App Router went stable, and more of that growth is driven by code written through agents like Claude Code, Cursor, and Codex. Next.js 16.2 bundled docs and introduced next-browser. Next.js 16.3 takes a significant step further with features designed for agent-driven development.

AGENTS.md Auto-Update by next dev

In 16.2, projects created with create-next-app pointed their AGENTS.md to the bundled docs in node_modules/next/dist/docs/. In 16.3, next dev automatically writes and updates that pointer, keeping existing projects current as you upgrade. Running the agents-md codemod is only needed for projects on 16.1 or earlier:

npx @next/codemod@canary agents-md

Here's what next dev inserts into your AGENTS.md:

<!-- BEGIN:nextjs-agent-rules -->

# This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure
may all differ from your training data. Read the relevant guide in
`node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.

<!-- END:nextjs-agent-rules -->

The block is only written when next dev detects an AI coding agent in the environment and the markers aren't already present. You can opt out with agentRules: false in next.config.ts.

First-Party Skills

Skills give agents framework-specific context for multi-step workflows. Previous "knowledge Skills" (covering App Router, caching APIs) are now retired in favor of the bundled docs. Three new first-party Skills arrive in 16.3:

next-dev-loop

Gives your coding agent access to the full development feedback loop. It can drive the browser, read the console, follow network requests, and inspect the React tree as it iterates. Requires agent-browser v0.27+.

npx skills add vercel/next.js --skill next-dev-loop

next-cache-components-adoption

Enables Cache Components in your project and works through the app one feature at a time. Two modes: Incremental (lands a single PR that opts every route out of validation, then ships features in follow-up PRs) and Direct (adopts every route on one branch). Each feature loop reads the actionable error, fetches the per-error docs page, applies the fix, then verifies via the browser.

npx skills add vercel/next.js --skill next-cache-components-adoption

next-cache-components-optimizer

Optimizes a Cache Components route for instant navigation by running an observe-fix-iterate loop against the static shell. Two modes: Page-render (increases how much of a page renders statically) and Nav (ensures navigations between pages are instant). The Skill screenshots before and after each change and rolls back if nothing meaningful changed.

npx skills add vercel/next.js --skill next-cache-components-optimizer

Agent Browser with React Introspection

The experimental next-browser from Next.js 16.2 has merged into the general-purpose agent-browser CLI. Version 0.27 adds React DevTools introspection on top of existing DOM, console, network, and Web Vitals access.

Agents can now:

• List the component tree — react tree
• Inspect a single component — react inspect <fiberId>
• Profile re-renders — react renders start / stop
• Check Suspense boundaries — react suspense --only-dynamic --json

Install with npm install -g agent-browser@^0.27. The React DevTools commands require the --enable react-devtools flag at launch. The next-dev-loop Skill does this automatically.

Actionable Errors with "Copy as Prompt"

With Cache Components enabled, every await on the server becomes a deliberate choice. Instant Insights presents each blocking navigation as an error with three labeled fixes — Stream, Cache, or Block — and a "Copy as prompt" button that packages the chosen fix into a paste-ready prompt for your coding agent.

The generated prompt walks the agent through: identifying the failing code, reading the matching error page, applying the canonical pattern, and verifying at runtime via the next-dev-loop Skill. Each fix has its own per-rule docs page on nextjs.org/docs/messages/ — with Patterns, Trade-offs, and Gotchas sections that agents can read directly.

The same fix menu also appears in the terminal during next build, so agents reading CI logs or build output without a browser overlay still get the same labeled options with links to the matching docs:

Ways to fix this:
  - [stream] Wrap in <Suspense> boundary
    https://nextjs.org/docs/messages/blocking-prerender-dynamic#wrap-in-or-move-into-suspense
  - [cache] Cache with "use cache"
    https://nextjs.org/docs/messages/blocking-prerender-dynamic#cache-the-component-or-data
  - [block] Set export const instant = false
    https://nextjs.org/docs/messages/blocking-prerender-dynamic#allow-blocking-route

Smaller, More Focused MCP Server

The DevTools MCP server previously included its own knowledge base and upgrade helpers. With the bundled docs now serving that purpose, those tools have been removed. In 16.3, two new compilation tools replace the need for running next build just to check compilation:

• get_compilation_issues — lists compilation issues for the whole project
• compile_route — compiles a single route

These tools answer the same question from the running dev server, much faster than a full build. The next-dev-loop Skill calls these endpoints directly via /_next/mcp.

Docs as Markdown

Append .md to any Next.js docs URL to get the page as plain Markdown. This works for all pages on nextjs.org/docs, including the per-error pages. The full index is at /docs/llms.txt, and /docs/llms-full.txt bundles all doc pages into a single file — both follow the llms.txt convention so any agent that reads llms.txt for other tools can read Next.js docs the same way.

What This Means for Developers

Next.js 16.3 represents a significant shift in two directions simultaneously. The Instant Navigations features address the performance UX gap that has driven many developers toward SPAs — giving you server-driven architecture with client-like responsiveness. The AI Improvements make Next.js one of the most agent-friendly frameworks in the ecosystem, with docs that agents can read natively, Skills that guide multi-step workflows, and errors that communicate directly to both humans and AI.

If you're building with Next.js, try the preview today. Read the official Instant Navigations post and AI Improvements post for the full details from the Next.js team. For a broader perspective on the framework ecosystem, see my React vs Vue vs Angular comparison guide and React vs Next.js comparison.

FAQ

Try the Preview

Install the 16.3 Preview today to explore Instant Navigations and the AI toolchain in your own projects:

npm install next@preview

Enable the new features in next.config.ts and check the preview docs for complete API reference. Vercel has also published Next Beats, an open-source music player on GitHub that demonstrates all these features in a real codebase.

If you're planning a Next.js project and want an experienced perspective on architecture, performance optimization, or agent-driven development workflows, reach out to me.