Next.js 16.4: Cache Components by default and how to upgrade

Next.js 16.4, released on 6 October 2026, is the release where the Next.js team started recommending Cache Components for every app. New projects created with create-next-app now have Cache Components switched on by default, and the team has said it will become the default for all apps in Next.js 17. If you run an existing Next.js 16 site, upgrading to 16.4 is low risk on its own, but it is also the right moment to plan your move to the new caching model.

This guide covers what changed, what it means for a typical marketing site, store or web app, and a sensible order for upgrading. At the time of writing (November 2026), the latest stable release on npm is 16.4.3.

What changed in Next.js 16.4

The release has three strands: Cache Components becoming the recommended default, new tooling for upgrades, and general improvements every app gets without changing code.

• Cache Components recommended for all apps. Earlier 16.x releases introduced the model but stopped short of recommending it everywhere. 16.4 adds the pieces the team says close the remaining gaps.
• ensureStatic, a route segment option that fails the build if dynamic content sneaks into a page or layout you want kept static.
• navigation() and prefetch(), two functions from next/cache that let you defer expensive work until a real navigation or an explicit prefetch.
• next upgrade --agent, which prepares migration guides, codemods and checks for a coding agent to work through.
• Turbopack improvements: a disk cache that uses 20 to 25% less space, lazy server hot reloading, a shared runtime chunk, shorter CSS Module class names and export mangling for smaller production bundles.
• React 19.3, which brings stable View Transitions and Fragment Refs.

Cache Components in plain terms

In the original App Router, Next.js cached a lot of things implicitly. That made pages fast, but it also produced the familiar complaint: "why is my page showing old data?". Cache Components flip this around. Everything renders at request time unless you mark it as cacheable with the 'use cache' directive, and you control how long it lives with cacheLife().

The Next.js team describes 'use cache' as a component-level version of the Cache-Control header. A product page can serve a cached product description and reviews block while rendering the shopper's basket or account menu at request time, all in one response. Cached parts can be held in the browser for client navigations and, optionally, on the server or prerendered at build time.

To use the full model in an existing app, you enable two flags in next.config.ts: cacheComponents: true and partialPrefetching: true. Partial Prefetching arrived in 16.3 and is now treated as part of the model.

Caching in Next.js is now something you opt into, component by component, rather than something you work around.

Two new controls worth knowing

ensureStatic: keep fast pages fast

For blogs, landing pages and catalogue pages, the risk with a mixed static and dynamic model is that one component reading cookies or headers quietly turns a static page into a server-rendered one. That costs compute and can slow the page down. Adding export const ensureStatic = 'navigation' to a page or layout makes the build fail if that happens. There are also looser settings, 'prefetch' and 'shell', if you only need to enforce that part of the route is static.

You can put it in the root layout to guard the whole site and then relax it in nested layouts that genuinely need dynamic content, such as an account area.

navigation() and prefetch(): control what loads early

Prefetching links removes loading spinners, but on a page with dozens of visible links it can also load a lot of data people never look at. With await navigation() inside a component, Next.js skips that component during a prefetch and renders it only when the user actually navigates. await prefetch() works one stage earlier: it keeps content out of the route's shell until an explicit prefetch. This gives you a middle ground between prefetching everything and switching prefetching off.

Improvements you get without changing code

Even if you are not ready for Cache Components, upgrading from an earlier 16.x release brings practical benefits:

There are also experimental options, including a Rust version of the React Compiler (experimental.turbopackRustReactCompiler), a disk cache garbage collector (experimental.turbopackGc) and lazy compilation of client-side dynamic imports. Experimental flags are worth trying on a branch, but we would not switch them on in production without testing.

How to upgrade safely

For most Next.js 16 apps, we suggest this order:

1. 1 Get onto a patched version first. Next.js now publishes security releases on a regular schedule. Upgrade to the latest 16.4 patch (16.4.3 at the time of writing) rather than 16.4.0.
2. 2 Upgrade on a branch. Run npm install next@latest react@latest react-dom@latest, or let a coding agent drive it with npx next@canary upgrade --agent=latest. Review every change the agent makes, as you would a pull request from a colleague.
3. 3 Run a full production build and your tests. Check build output for routes that changed from static to dynamic, and compare bundle sizes with the improved bundle analyser.
4. 4 Deploy to staging and check real pages. Pay attention to anything that reads cookies, headers or search parameters, plus forms that use Server Actions.
5. 5 Plan Cache Components separately. Treat the move to cacheComponents: true as its own piece of work, ideally route by route, with ensureStatic protecting the pages that matter most for SEO and conversion.

If you are still on Next.js 15, note that 15.x is in Maintenance LTS and, according to the Next.js support policy, receives security releases until 31 January 2027. That gives you a few months, but the jump to 16 brings breaking changes such as async params and cookies(), Turbopack as the default bundler, and the rename of middleware.ts to proxy.ts, so it is worth starting now.

What this means for hosting

Cache Components lean on caching layers, so where you host matters. Next.js 16.2 introduced a stable Adapter API and a public adapter test suite, with the aim of making deployments behave more consistently across platforms. If you self-host on a Node.js server or container, check that your cache handler and CDN set-up support the features you plan to use, and test revalidation behaviour before going live. Managed platforms such as Vercel typically handle more of this for you.

Frequently asked questions

Do I have to switch to Cache Components when I upgrade to 16.4?

No. Existing apps keep working with their current set-up. Only new apps from create-next-app get Cache Components enabled by default. The Next.js team has said it will be the default in Next.js 17, so it is worth planning the migration.

Is Next.js 16.4 stable enough for production?

Yes, it is the current stable release line. Use the latest patch version and leave experimental flags off unless you have tested them.

Will the React Compiler speed up my site?

It can reduce unnecessary re-renders, which often helps interactive pages. It is enabled with reactCompiler: true and is not on by default. The default version relies on Babel, so expect longer build times; the faster Rust version is still experimental.

What happened to middleware.ts?

Since Next.js 16 it is deprecated in favour of proxy.ts, which runs on the Node.js runtime. In most cases you rename the file and the exported function to proxy.

Need help upgrading your Next.js app?

We build and maintain Next.js sites, from marketing pages to headless storefronts, and can handle upgrades, Cache Components migrations and hosting set-up. See our Next.js development services, the React front end and Node.js API we built for a startup incubator, or our guides to React vs Next.js and headless Shopify with Next.js. When you are ready, tell us about your project.

Sources: Next.js 16.4 release post, Next.js 16 release post, Next.js across platforms, Next.js support policy.