Next.js 16 Overview

Next.js 16 is here, bringing stable Turbopack, a new caching model with "use cache", AI-assisted debugging with MCP, and significant improvements to routing and performance.

1. Cache Components

The biggest shift in Next.js 16 is the introduction of Cache Components and the "use cache" directive. This moves away from implicit caching defaults to an explicit, opt-in model.

The "use cache" Directive

You can now explicitly cache specific parts of your application—pages, layouts, components, or even functions—using this directive.

// app/page.tsx
"use cache";
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

This aligns Partial Prerendering (PPR) with the caching story. Dynamic rendering is now the default, and you opt-in to static caching where needed. To enable this:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

2. Next.js Devtools MCP

Debugging gets a massive upgrade with the Model Context Protocol (MCP) integration. This allows AI agents (like Cursor or Windsurf) to directly interface with your running Next.js application context.

Key capabilities:

3. proxy.ts (Replacing middleware.ts)

Next.js 16 introduces proxy.ts to replace middleware.ts. This change clarifies the network boundary and explicitly runs on the Node.js runtime.

// proxy.ts (formerly middleware.ts)
import { NextRequest, NextResponse } from "next/server";
export default function proxy(request: NextRequest) {
  if (request.nextUrl.pathname === "/") {
    return NextResponse.redirect(new URL("/home", request.url));
  }
}

*Note: middleware.ts is still supported for Edge runtime cases but is deprecated.*

4. Turbopack is Stable

Turbopack is now the default bundler for development, offering incredible speed improvements:

For large applications, you can also test the new Turbopack File System Caching (beta) for even faster startup times.

5. Enhanced Routing & Navigation

Routing internals have been overhauled to be faster and more efficient without any code changes required from you.

6. Improved Caching APIs

refined `revalidateTag()`

You must now provide a cache profile (like 'max', 'hours') to enable Stale-While-Revalidate (SWR) behavior.

import { revalidateTag } from 'next/cache';
// Recommended for most cases (updates background, serves stale immediately)
revalidateTag('blog-posts', 'max'); 

New `updateTag()`

For "read-your-writes" scenarios (like after a form submission), updateTag expires the cache and waits for fresh data within the same request.

'use server';
import { updateTag } from 'next/cache';
export async function updateUser(id, data) {
  await db.update(id, data);
  // User sees update immediately
  updateTag(`user-${id}`);
}

7. React 19.2 Support

Next.js 16 includes support for React 19.2 features:

Breaking Changes

Conclusion

Next.js 16 is a maturity release. It stabilizes the fast tooling (Turbopack), simplifies the mental model for caching ("use cache"), and prepares the ecosystem for AI-assisted workflows. It's time to upgrade!