iiinova — where your digital self keeps evolving

When the network drops, requests normally throw. The experimental 𝚎𝚡𝚙𝚎𝚛𝚒𝚖𝚎𝚗𝚝𝚊𝚕.𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎 flag keeps them pending and retries on reconnect. A companion 𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎 hook reports when you're offline, so you can render some UI to let your users know.

Code snippet for an Offline Banner component in a web application, indicating user is offline and will retry on reconnection.

0130

The React Compiler optimizes your components at build time, letting you skip manual memoization. The React team built a Rust port of it, which we run in Turbopack instead of Babel. We tried this experimental version on v0: 34% faster to a ready page cold, 46% warm.

Code snippet configuring a React compiler in a Next.js project, highlighting settings for an experimental Rust port.

190

16.3 adds new first-party Skills that drive focused agent workflows. The 𝚗𝚎𝚡𝚝-𝚍𝚎𝚟-𝚕𝚘𝚘𝚙 Skill is general-purpose, letting an agent drive the browser and inspect the React tree to verify changes. Additional Skills are more specific, like adopting Cache Components.

Text details commands for an agent to manage browser interactions and optimize Next.js performance with specific skills.

The 𝚒𝚗𝚜𝚝𝚊𝚗𝚝() test helper asserts what content must be visible the moment you click a link. This prevents a later refactor from making the navigation slow again.

Code snippet for a test using Playwright to verify product visibility and inventory status upon navigation to a product page.

Prefetching only runs in production, which has made it hard to visually inspect your loading shells during development. The new Navigation Inspector pauses any navigation at the shell, so you can see which part of a route renders instantly, and which part waits on the network.

Navigation Inspector displays a paused debugger, showing a loading shell for the page at the target "/store/shoes" with navigation options.

180

Partial Prefetching gives you fine-grained control over how much content a link should prefetch for its target: a minimal loading shell, a partially rendered page, or all of its content. And loading shells can be reused across links, so users can never "beat the prefetch".

170

Instant Navigations is a new suite of opt-in tools and behaviors for SPA-like responsiveness in Next.js. First up: Instant Insights flags navigations that aren't instant, with a set of fixes for you (or your agent).

Next.js code snippet showing a navigation issue due to uncached data, with suggested fixes like Stream, Cache, and Block options.

180

Agents often code using outdated patterns from their training data. Now, 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 maintains an 𝙰𝙶𝙴𝙽𝚃𝚂.𝚖𝚍 block that points them to a local copy of the docs pinned to your app's version, ensuring they always use the latest best practices.

A text block outlines Next.js changes, emphasizing breaking updates, directory structures, and documentation access for developers.

280

Turbopack now supports the Vite-compatible 𝚒𝚖𝚙𝚘𝚛𝚝.𝚖𝚎𝚝𝚊.𝚐𝚕𝚘𝚋 API for loading multiple modules from the file system. For a Server Component that reads local files, like a folder of Markdown posts, it also brings hot-module reloading.

Code snippet implements a React function component to load and display Markdown posts using the Vite-compatible API.

170

React error boundaries used to swallow 𝚗𝚘𝚝𝙵𝚘𝚞𝚗𝚍 and 𝚛𝚎𝚍𝚒𝚛𝚎𝚌𝚝, and could only reset client state. Now 𝚌𝚊𝚝𝚌𝚑𝙴𝚛𝚛𝚘𝚛 defines a custom boundary that lets those pass through, and 𝚛𝚎𝚝𝚛𝚢() re-renders Server Components within the boundary.

Code snippet for a React error boundary with a fallback component, including error display and retry button functionality.

170

App Router rendering now uses native Node.js streams end-to-end, instead of converting to and from web streams on each request. With that overhead gone, apps handle up to 22% more requests under load in our benchmarks.

A bar graph shows performance comparison between web streams and Node.js streams, highlighting a 22% increase for Node.js under load.

1120

TypeScript 7 is a 10x faster native port of the compiler, and 𝚗𝚎𝚡𝚝 𝚋𝚞𝚒𝚕𝚍 now uses it for type checking. Install it with 𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 -𝙳 𝚝𝚢𝚙𝚎𝚜𝚌𝚛𝚒𝚙𝚝@7.

Code snippet defines a Next.js configuration with experimental TypeScript CLI settings enabled.

2121

The disk cache that has sped up 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 since 16.1 now also works for 𝚗𝚎𝚡𝚝 𝚋𝚞𝚒𝚕𝚍. Turbopack can read existing entries from .𝚗𝚎𝚡𝚝/𝚌𝚊𝚌𝚑𝚎 across CI runs before compiling new changes. We've seen projects build up to 5.5x faster on the warm path.

Bar chart comparing compile times for `next build` with cached and cold performances for nextjs.org, vercel.com/home, and vercel.com/geist.

180

Next.js @nextjs.org · 29/06/2026

Long 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 sessions now use up to 90% less memory. Turbopack used to keep visited routes cached in memory. With disk caching and memory eviction on by default, it can now offload that cache to disk.

Displays memory usage comparisons for two websites after compiling 50 routes, showing significant reductions in memory consumption.

1110

React Compiler used to run as a Babel transform, which meant Turbopack spun up a Node.js worker and re-parsed every file. The React team's new Rust port drops that overhead. When enabled, Turbopack route compilation got 20 to 50% faster in tests on apps like v0.

060

Next.js @nextjs.org · 29/06/2026

Filesystem Cache has been speeding up 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 since 16.1, and now it works for 𝚗𝚎𝚡𝚝 𝚋𝚞𝚒𝚕𝚍 too. By sharing the .𝚗𝚎𝚡𝚝 directory between CI runs, Turbopack can read existing entries from disk. We've seen builds run up to 5.5x faster on the warm path.

Graph comparing Turbopack compile times for different scenarios, highlighting cold and cached durations for next build processes.

Next.js @nextjs.org · 29/06/2026

Coding agents, IDEs, typecheckers, and linters all run at dev time, and each one uses memory. Thanks to file-system persistence, Turbopack can now evict more of its in-memory cache. In Next.js 16.3, long dev sessions use up to 90% less memory.

Memory usage comparison after compiling 50 routes: Vercel.com drops from 21.5 GB to 2 GB; Next.js goes from 4,600 MB to 840 MB.

Some agents never see the dev overlay. They don't drive a browser, and read errors from the terminal instead. So the same labeled fixes show up in the console too, during 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 and 𝚗𝚎𝚡𝚝 𝚋𝚞𝚒𝚕𝚍.

040

Each fix on an Instant Insight comes with a prompt your agent can run end to end. It walks the agent through the whole flow: read the docs page for the patterns and trade-offs, apply the fix, then verify it in the browser with 𝚗𝚎𝚡𝚝-𝚍𝚎𝚟-𝚕𝚘𝚘𝚙.

140

The 𝚗𝚎𝚡𝚝-𝚌𝚊𝚌𝚑𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜-𝚘𝚙𝚝𝚒𝚖𝚒𝚣𝚎𝚛 Skill grows a route's shell so more of the page is ready before the request lands. It builds on 𝚗𝚎𝚡𝚝-𝚍𝚎𝚟-𝚕𝚘𝚘𝚙, screenshotting each change and rolling back anything that didn't help.

The 𝚗𝚎𝚡𝚝-𝚌𝚊𝚌𝚑𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜-𝚊𝚍𝚘𝚙𝚝𝚒𝚘𝚗 Skill migrates your app to Cache Components, feature by feature. It reads the Instant Insights, applies the fixes, and verifies each route with 𝚗𝚎𝚡𝚝-𝚍𝚎𝚟-𝚕𝚘𝚘𝚙, checking in so you stay in control.

We've retired our knowledge Skills. The auto-managed 𝙰𝙶𝙴𝙽𝚃𝚂.𝚖𝚍 teaches agents the framework's APIs now. We have new Skills that drive multi-step workflows instead. For example, 𝚗𝚎𝚡𝚝-𝚍𝚎𝚟-𝚕𝚘𝚘𝚙 verifies each change in a real browser via 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛.

Instant Navigations builds on Cache Components. To migrate an existing app, install our Skill: npx skills add vercel/next.js --skill next-cache-components-adoption Then ask your agent to adopt Cache Components using the Skill.

A terminal display shows a cloning process from GitHub, listing skills available for installation, including one for next-cache-components-adoption.

1102

So, we're borrowing a trick from single-page apps. Next.js now prefetches one reusable shell per route and caches it on the client, instead of a separate request per link. A click renders the prefetched shell instantly while the rest of the page streams in from the server.

Network panel displaying a single fetch request with status 200, showing details like method, time, and transferred data.

2170

To guarantee instant navigations, the client must immediately render something when a link is clicked. Previously, Next.js tried to solve this by prefetching every link, a flurry of requests as you scrolled. Many of you told us this looked ridiculous, and frankly, we agree.

A network panel displays multiple fetch requests with varying sizes and response statuses, indicating data retrieval progress over time.

160

Next.js @nextjs.org · 02/04/2026

Instant Insights gives you options for how to make a navigation instant: • Stream the data behind a <𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎> boundary • Cache the data with '𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎' Or allow the navigation to Block with 𝚎𝚡𝚙𝚘𝚛𝚝 𝚌𝚘𝚗𝚜𝚝 𝚒𝚗𝚜𝚝𝚊𝚗𝚝 = 𝚏𝚊𝚕𝚜𝚎.

Code snippet illustrates a Next.js function encountering uncached data during navigation, with suggestions for resolution options displayed below.

1111

New agent skill: 𝚛𝚎𝚊𝚌𝚝-𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 Add React <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> animations to any React app. Also covers how Next.js can natively integrate them. • Animate elements across navigations • Slide pages forward and back • Smooth loading transitions • Composition and accessibility handled

1243

𝚗𝚎𝚡𝚝 𝚍𝚎𝚟 now writes a lock file with the server's PID, port, and URL. When a second server tries to start, the agent gets everything it needs to resolve the conflict in one shot.

050

Next.js now forwards all browser errors to the terminal during development, making it easy for agents to fix client-side bugs.

𝚌𝚛𝚎𝚊𝚝𝚎-𝚗𝚎𝚡𝚝-𝚊𝚙𝚙 now ships 𝙰𝙶𝙴𝙽𝚃𝚂.𝚖𝚍 by default, pointing agents to version-matched docs bundled in 𝚗𝚘𝚍𝚎_𝚖𝚘𝚍𝚞𝚕𝚎𝚜. This hit a 100% eval pass rate vs. 79% for skill-based approaches.

@𝚟𝚎𝚛𝚌𝚎𝚕/𝚗𝚎𝚡𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 lets agents inspect a running Next.js app from the terminal. Component trees, PPR shells, screenshots, network requests. Agents can lower Suspense allowing more cached content to be included in the static prerender.

Next.js @nextjs.org · 19/03/2026

Server Fast Refresh brings browser-style hot reloading to server code. Only the changed module is reloaded instead of clearing the entire 𝚛𝚎𝚚𝚞𝚒𝚛𝚎.𝚌𝚊𝚌𝚑𝚎 chain. Up to ~375% faster server-side updates in real Next.js apps.

The error overlay now displays up to five levels of 𝙴𝚛𝚛𝚘𝚛.𝚌𝚊𝚞𝚜𝚎 chains, making it easier to trace errors that wrap other errors.

040

Hydration mismatch errors now show a + 𝙲𝚕𝚒𝚎𝚗𝚝 / - 𝚂𝚎𝚛𝚟𝚎𝚛 label, so you can clearly spot each environment.

140

The default production error page has been redesigned. If you haven't defined a custom 𝚎𝚛𝚛𝚘𝚛.𝚝𝚜𝚡 or 𝚐𝚕𝚘𝚋𝚊𝚕-𝚎𝚛𝚛𝚘𝚛.𝚝𝚜𝚡, the built-in fallback now has a cleaner, more modern look.

140

Server Function calls are now logged in the terminal during 𝚗𝚎𝚡𝚝 𝚍𝚎𝚟. You'll see the function name, arguments, execution time, and source file.

We contributed a change to React that makes Server Components payload deserialization up to ~350% faster. In real Next.js apps, that's 25–60% faster rendering to HTML.