Next.js 16 Complete Guide: Cache Components, Turbopack and proxy.ts

Next.js 16 is one of the biggest releases of the framework since the App Router arrived. The Next.js team released it on 21 October 2025, and it changes three things you touch every day: how caching works, which bundler builds your app, and where request interception lives. This guide walks through each change with code, then gives you a checklist for upgrading an existing project.

What is new in Next.js 16 at a glance

Next.js 16 introduces a more explicit approach to caching and improves the development experience with Turbopack.

Cache Components and the "use cache" directive

Next.js 16 introduces a more explicit caching model. Dynamic code runs at request time unless you explicitly cache it.

Enable the new model in your configuration:

import type { NextConfig } from "next";

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

export default nextConfig;
    

Then mark exactly what should be cached with the "use cache" directive.

import { cacheLife, cacheTag } from "next/cache";

async function getPosts() {
  "use cache";

  cacheLife("hours");
  cacheTag("blog-posts");

  const res = await fetch(
    "https://api.techsutrahub.com/posts"
  );

  return res.json();
}
    

New caching APIs: updateTag, refresh and revalidateTag

Next.js 16 gives you clearer tools for invalidating data.

revalidateTag now takes a cache profile

revalidateTag now expects a cache profile and enables stale-while-revalidate behaviour.

import { revalidateTag } from "next/cache";

revalidateTag("blog-posts", "max");
revalidateTag("products", { expire: 3600 });
    

updateTag for read-your-writes

updateTag can be used in Server Actions to expire a tag and immediately read fresh data in the same request.

"use server";

import { updateTag } from "next/cache";

export async function saveProfile(
  userId: string,
  formData: FormData
) {
  await db.users.update(userId, {
    name: formData.get("name"),
  });

  updateTag(`user-${userId}`);
}
    

refresh for uncached data

refresh re-renders uncached data without touching the cache.

Turbopack is now the default bundler

Turbopack is now the default bundler for Next.js development and production builds.

next dev
next build
    

proxy.ts replaces middleware.ts

middleware.ts is renamed to proxy.ts. The request interception logic remains conceptually similar.

import {
  NextResponse,
  type NextRequest
} from "next/server";

export default function proxy(
  request: NextRequest
) {
  const loggedIn =
    request.cookies.has("session");

  if (
    !loggedIn &&
    request.nextUrl.pathname.startsWith("/dashboard")
  ) {
    return NextResponse.redirect(
      new URL("/login", request.url)
    );
  }

  return NextResponse.next();
}
    

React Compiler support is stable

React Compiler can automatically optimize components and reduce the need for manual memoization.

npm install babel-plugin-react-compiler@latest
    

const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;
    

Faster navigation and smarter prefetching

The router includes improvements around layout deduplication and incremental prefetching.

• Layout deduplication: shared layouts are downloaded more efficiently.
• Incremental prefetching: only missing parts are prefetched.

Breaking changes to check before upgrading

Review your project dependencies and runtime APIs before upgrading to Next.js 16.

1. Node.js 20.9 or newer is required.
2. params, searchParams, cookies() and headers() must be awaited.
3. next lint is removed.
4. AMP support is removed.
5. Runtime configuration should use environment variables.
6. Parallel route slots need an explicit default.js.

How to upgrade to Next.js 16

Start with the official codemod and then test the application carefully.

npx @next/codemod@canary upgrade latest

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

Conclusion

Next.js 16 makes caching more explicit, improves build performance with Turbopack and clarifies request handling with proxy.ts.

For existing applications, upgrade on a separate branch, review the breaking changes and test your caching behaviour carefully.

Want to go further? Read our TypeScript guide and explore our developer tools.