Next.js App Router in 2026: Caching & Turbopack Guide

The Next.js App Router has changed a lot since Next.js 15. Caching is now opt-in, Turbopack is the default bundler, and the latest release, Next.js 16.4, recommends a new programming model called Cache Components for every app.

This guide explains what actually changed in the App Router, what it means for your code, and how to upgrade without breaking things.

Quick Summary

Cache Components is now the recommended model for every Next.js app, and new apps made with create-next-app have it enabled by default. It is planned to become the default in Next.js 17. nextjs
Turbopack is now the default bundler for all apps, and you can opt out with the --webpack flag. nextjs
proxy.ts replaces middleware.ts. nextjs
Next.js 16.4.5 and 15.5.29 include security fixes, several of them related to Cache Components, so patch before you ship. nextjs

How the Next.js 16 Releases Fit Together

Next.js 16 shipped on October 21, 2025, followed by 16.1 in December 2025, 16.2 in March 2026, 16.3 on August 3, 2026 and 16.4 on October 6, 2026. In short: nextjs

16.0: Cache Components, stable Turbopack, proxy.ts, new caching APIs
16.1: Turbopack file system caching for next dev
16.2: Adapter API and Turbopack build improvements
16.3: Instant Navigations, Partial Prefetching, faster builds, root params
16.4: Cache Components recommended for all apps, ensureStatic, smaller Turbopack output, React 19.3

Caching: From Implicit to Opt-In

The old problem

The team admits that the older caching model was implicit and confusing, and not very helpful for dynamic apps. Many developers were never sure what was cached and why. nextjs

The new model: Cache Components

Caching with Cache Components is entirely opt-in. All dynamic code in a page, layout or API route runs at request time by default. You mark what you want cached with the 'use cache' directive: nextjs

tsx

import { cacheLife } from 'next/cache';

async function Projects({ userId }) {
  'use cache';
  cacheLife('hours');

  const projects = await db.query.projects.findMany({
    where: eq(projectsTable.userId, userId),
  });

  return projects.map((p) => <p key={p.id}>{p.name}</p>);
}

You can think of 'use cache' as a component-level version of the Cache-Control HTTP header. It lets you mix cached and request-time content in one page. nextjs

To turn it on, add two flags to your config:

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

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

export default nextConfig;

Cache invalidation APIs

revalidateTag() now needs a cacheLife profile as the second argument, and the single-argument form is deprecated. updateTag() is new and is for Server Actions, where you want users to see their own changes immediately. refresh() is also new and refreshes uncached data only. nextjs

import { revalidateTag, updateTag, refresh } from 'next/cache';

revalidateTag('blog-posts', 'max'); // stale-while-revalidate
updateTag(`user-${userId}`);        // Server Actions: read your own writes
refresh();                          // refresh uncached data only

Keeping pages static with ensureStatic

Next.js 16.4 adds ensureStatic, which fails the build if a dynamic component sneaks into a route that should be static. You can set it to “navigation”, “prefetch” or “shell”, and you can add it to a layout. nextjs

tsx

export const ensureStatic = 'navigation';

This is useful for blogs, marketing pages and stores, where one dynamic component can raise your server costs by accident.

Turbopack: The Default Bundler

Turbopack is stable for development and production builds. The Next.js team reports 2 to 5 times faster production builds and up to 10 times faster Fast Refresh. It has improved with each release: nextjs

In 16.3, dev memory use dropped by up to 90%, and the disk cache now also works for next build. nextjs
In 16.4, the disk cache uses 20 to 25% less space, server HMR compiles only what a request needs, and production bundles are smaller. nextjs

If you have a custom webpack setup, you can keep using it:

next dev --webpack
next build --webpack

Other App Router Changes You Should Know

middleware.ts is deprecated for Node.js use. Rename it to proxy.ts and rename the exported function to proxy. nextjs
params, searchParams, cookies(), headers() and draftMode() must be used asynchronously, so you need await. nextjs
Minimum versions are Node.js 20.9 and TypeScript 5.1. nextjs
next lint was removed, so use ESLint or Biome directly. nextjs
Root params, such as [lang], can now be read from any Server Component without passing props down. nextjs
Next.js 16.4 ships with React 19.3, which includes stable View Transitions. nextjs

Security: Patch Before You Ship

The November 3, 2026 security release fixed issues in v16.4.5 and v15.5.29. Several affect apps with Cache Components enabled, including cache content being shown across tenants or users in some use cache setups. If you use Cache Components, especially in a multi-tenant app, upgrade to the patched version. nextjs

Should You Upgrade?

New projects: Start on 16.4 with Cache Components. It is the default for new apps.
Apps on Next.js 15: Upgrade to 16, fix the breaking changes, and enable Cache Components later on a separate branch.
Apps on Next.js 16.0 to 16.3: Upgrade to 16.4.5 for the performance gains and security fixes.
Apps with custom webpack config: Use --webpack first, then move to Turbopack when ready.
Multi-tenant apps using use cache: Patch immediately.

How to Upgrade (Step by Step)

Commit your work and create a new branch.
Run the codemod, or upgrade manually:

npx @next/codemod@canary upgrade latest

npm install next@latest react@latest react-dom@latest

Rename middleware.ts to proxy.ts and add await to params, searchParams, cookies() and headers().
Run next build and fix any errors.
Test with next dev and check your slowest pages.
Enable cacheComponents and partialPrefetching on a separate branch and test again.
Optional: npx next@canary upgrade --agent=latest prepares migration guidance for a coding agent. nextjs

Frequently Asked Questions

Is Turbopack production-ready?

Yes. It has been stable since Next.js 16 and is the default bundler.

Do I need to use Cache Components now?

No. It is opt-in for existing apps. The team plans to make it the default in Next.js 17.

Does middleware.ts still work?

It still works for Edge runtime use cases, but it is deprecated. Use proxy.ts otherwise.

What is the minimum Node.js version?

Node.js 20.9.

What is the latest Next.js version?

As of November 2026, it is Next.js 16.4, with security fixes in 16.4.5.

Conclusion

The App Router in 2026 is more explicit and faster. Caching is opt-in with 'use cache', Turbopack is the default, and Next.js 16.4 recommends Cache Components for every app. For existing apps, upgrade to the patched version first, then adopt Cache Components step by step.

For details, read the Next.js 16.4 release post and the Next.js 16 upgrade guide.

Next.js App Router in 2026: Caching, Turbopack and What Actually Changed