What's New in Next.js 16: Cache Components, Turbopack and proxy.ts

Next.js 16 is one of the most polished releases the framework has had in a while. Instead of chasing big rewrites, it focuses on the fundamentals: faster builds, predictable caching, clearer request handling, and better developer visibility. The headline changes are:

Cache Components with the use cache directive, for explicit caching.
Turbopack as the default bundler, with 2–5× faster builds.
proxy.ts, which replaces middleware.ts.
Next.js DevTools MCP, so AI coding tools understand your app.
Build Adapters (alpha), for custom deployment targets.

This portfolio runs on Next.js 16, so everything below comes from real use, not just the release notes. Here is what is new, what changed, and why it matters.

Cache Components

Caching in Next.js used to be a bit of a mystery. Sometimes your data was cached when you didn't want it to be; other times it wasn't cached at all. You'd deploy, see stale data, and wonder if the problem was in your code or in the framework. Next.js 16 fixes that by introducing Cache Components: A new, explicit caching model. Instead of Next.js deciding what to cache, you tell it what should be cached and when to revalidate. It's built on top of Partial Pre-rendering (PPR), which already blurred the line between static and dynamic pages. Together, they make rendering predictable and flexible. Turn it on in next.config.ts:

import type { NextConfig } from "next";

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

export default nextConfig;

Then add "use cache" to the page, component, or function you want cached. Everything else runs at request time by default:

Tsx

import { cacheLife } from "next/cache";

export default async function BlogList() {
  "use cache";
  cacheLife("hours");

  const posts = await getPosts();
  return <PostList posts={posts} />;
}

Next.js DevTools MCP

One of the more forward-looking additions in this release is Next.js DevTools MCP. It hooks into the Model Context Protocol (MCP), which lets AI tools and agents understand your project's context, your routing, caching, and rendering behaviour. Why does that matter? Because AI that actually knows how your app works can give better debugging help, clearer explanations, and smarter suggestions. Instead of just dumping stack traces, it can reason about what's happening under the hood. It's still early, but it points toward a future where your dev tools don't just react to errors, they understand them.

proxy.ts

The old middleware.ts file is now proxy.ts, and the exported middleware function becomes proxy. It runs on the Node.js runtime, so the network boundary of your app is explicit.

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

export function proxy(request: NextRequest) {
  if (!request.cookies.get("session")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

There has been a lot of confusion around how middlewares work in Next.js. These middlewares are not your typical middlewares. You're at the mercy of any network calls you make in these middlewares, as a single slow network call may block the initial load of your entire webpage, which is not ideal. Middlewares in Next.js are used to do something lightweight, for example, redirecting users based on the authentication cookies stored. Since the term middleware continued to cause issues, the Next.js team finally decided to rename it to proxy so that the purpose of using it is clear.

Logging Improvements

Next.js 16 also improves logs, and not in a superficial "we added colours" way. Build and dev logs now show where time is spent, breaking down compilation, rendering, and optimization steps. So if your build suddenly feels slower, you can immediately tell which parts are to blame. It's a quiet but practical improvement that makes day-to-day development just a little less frustrating.

Turbopack Update

Turbopack has officially graduated from beta and is now the default bundler for all new Next.js projects. It's fast, like 2–5× faster builds and up to 10× faster Fast Refresh. For large projects, filesystem caching (currently in beta) further cuts down on startup times by reusing compiled artifacts between sessions. You'll notice the difference most if you're in that constant build, refresh–iterate loop all day. It's less about benchmarks and more about getting back into flow faster.

Build Adapters API

If you've ever had to deploy a Next.js app in an unusual environment, say, outside Vercel, this one's for you. Build Adapters, now in alpha, let you hook into the build process and modify it without forking the framework. It's especially handy for teams self-hosting or building custom pipelines. This update shows that Next.js is starting to take flexibility seriously for developers running the framework in different environments.

How to upgrade to Next.js 16

Check the new minimum versions first: Node.js 20.9 or later (Node 18 is no longer supported) and TypeScript 5.1 or later. Then run the official codemod. It updates your dependencies, renames middleware.ts to proxy.ts, and fixes most breaking changes for you:

Bash

npx @next/codemod@canary upgrade latest

Or upgrade by hand:

Bash

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

Breaking changes to review after the codemod:

params, searchParams, cookies() and headers() must be awaited.
next lint is removed. Run ESLint directly.
AMP support and the old runtime config are removed.
The experimental.ppr flag is replaced by cacheComponents: true.

Run npm run build and fix what it reports before you deploy. If you are choosing where to deploy, see the best Next.js hosting platforms in 2026.

Conclusion

Next.js 16 represents a maturation of the framework, focusing on developer experience and stability rather than flashy new features. Several key improvements are available:

Cache Components provide explicit, predictable caching control.
DevTools MCP enables AI-powered debugging with context-aware suggestions.
proxy.ts clarifies the purpose of middleware functionality.
Logging improvements offer better visibility into build performance.
Turbopack becomes the default bundler with significant speed improvements.
Build Adapters provide flexibility for custom deployment environments.

These improvements compound over time, making Next.js 16 a solid foundation for production applications. Evaluate your project's needs to take full advantage of these enhancements. Setting up a new Next.js 16 project? Pick your package manager first: pnpm vs npm vs Yarn vs Bun.

FAQ

What is new in Next.js 16?

Cache Components with use cache, Turbopack as the default bundler, proxy.ts replacing middleware.ts, Next.js DevTools MCP, better build logs, and the Build Adapters API in alpha.

What Node.js version does Next.js 16 need?

Node.js 20.9 or later. Node.js 18 is no longer supported.

Is middleware.ts removed in Next.js 16?

It is deprecated. Rename the file to proxy.ts and the exported function to proxy. The upgrade codemod does this for you.

How do I enable Cache Components?

Set cacheComponents: true in next.config.ts, then add the "use cache" directive to the pages, components, or functions you want cached.

Is Turbopack the default in Next.js 16?

Yes. Turbopack is stable and is now the default bundler for next dev and next build.