What's New in Next.js 16? Latest Features Every Developer Should Know

Next.js 16 brings major improvements across the board, from stable Turbopack to new Cache Components, React Compiler support, and enhanced routing and caching. Let's explore what's new and what you need to know to upgrade.

Turbopack is Now Stable

One of the most significant changes in Next.js 16 is that Turbopack has reached stability for both development and production builds, and is now the default bundler for all new Next.js projects. The numbers are impressive: over 50% of development sessions and 20% of production builds on Next.js 15.3+ are already running on Turbopack.

With Turbopack, developers can expect:

• 2-5x faster production builds
• Up to 10x faster Fast Refresh
• File system caching in development mode for even faster compile times

Cache Components: Clearer and More Flexible Caching

Cache Components is a new set of features designed to make caching in Next.js both more explicit and more flexible. It centers around the new "use cache" directive, which can be used to cache pages, components, and functions, leveraging the compiler to automatically generate cache keys wherever it's used.

Unlike the implicit caching found in previous versions of the App Router, caching with Cache Components is entirely opt-in. All dynamic code in any page, layout, or API route is executed at request time by default, giving Next.js an out-of-the-box experience that's better aligned with what developers expect from a full-stack application framework.

Cache Components also completes the story of Partial Prerendering (PPR), which was first introduced in 2023. Prior to PPR, Next.js had to choose whether to render each URL statically or dynamically; there was no middle ground. PPR eliminated this dichotomy, letting developers opt portions of their static pages into dynamic rendering via Suspense without sacrificing the fast initial load of fully static pages.

Enabling Cache Components

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

React Compiler Support is Now Stable

Built-in support for React Compiler is now stable in Next.js 16, following the React Compiler's 1.0 release. React Compiler automatically memoizes components, reducing unnecessary re-renders with zero manual code changes.

The `reactCompiler` configuration option has been promoted from experimental to stable. It's not enabled by default as the team continues gathering build performance data across different application types. Expect compile times in development and during builds to be higher when enabling this option, as React Compiler relies on Babel.

npm install babel-plugin-react-compiler@latest

Next.js DevTools MCP: AI-Assisted Debugging

Next.js 16 introduces Next.js DevTools MCP, a Model Context Protocol integration for AI-assisted debugging with contextual insight into your application. The MCP helps AI agents:

• Access Next.js knowledge: Routing, caching, and rendering behavior
• View unified logs: Browser and server logs without switching contexts
• Access errors automatically: Detailed stack traces without manual copying
• Understand page context: Contextual understanding of the active route

This is a major improvement for developers using AI to debug and develop applications. Instead of manually copying error messages and pasting them into AI tools, the MCP allows AI agents to directly access the information they need.

proxy.ts Replaces middleware.ts

`proxy.ts` replaces `middleware.ts` and makes the app's network boundary explicit. `proxy.ts` runs on the Node.js runtime, providing a single, predictable runtime for request interception.

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

Enhanced Routing and Navigation

Next.js 16 includes a complete overhaul of the routing and navigation system, making page transitions leaner and faster. These changes require no code modifications and are designed to improve performance across all apps.

Layout Deduplication

When prefetching multiple URLs with a shared layout, the layout is downloaded once instead of separately for each Link. For example, a page with 50 product links now downloads the shared layout once instead of 50 times, dramatically reducing network transfer size.

Incremental Prefetching

Next.js now only prefetches parts not already in cache, rather than entire pages. The prefetch cache now:

• Cancels requests when the link leaves the viewport
• Prioritizes link prefetching on hover or when re-entering the viewport
• Re-prefetches links when their data is invalidated
• Works seamlessly with upcoming features like Cache Components

You may see more individual prefetch requests, but with much lower total transfer sizes. The Next.js team believes this is the right trade-off for nearly all applications.

Improved Caching APIs

Next.js 16 introduces refined caching APIs for more explicit control over cache behavior.

revalidateTag() Updated

`revalidateTag()` now requires a `cacheLife` profile as the second argument to enable stale-while-revalidate (SWR) behavior:

import { revalidateTag } from 'next/cache';

// Use built-in cacheLife profile (we recommend 'max' for most cases)
revalidateTag('blog-posts', 'max');

// Or use other built-in profiles
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// Or use an inline object with a custom revalidation time
revalidateTag('products', { expire: 3600 });

updateTag() - New API

`updateTag()` is a new Server Actions-only API that provides read-your-writes semantics, expiring and immediately reading fresh data within the same request. Perfect for forms, user settings, and any workflow where users expect to see their updates instantly.

'use server';

import { updateTag } from 'next/cache';

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  
  // Expire cache and refresh immediately - user sees their changes right away
  updateTag(`user-${userId}`);
}

Upgrading from Previous Versions

For upgrading, the team recommends using the automated upgrade CLI:

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest

# ...or upgrade manually
npm install next@latest react@latest react-dom@latest

# ...or start a new project
npx create-next-app@latest

Security Considerations

It's worth noting that Next.js 16 was released alongside important security updates. In late 2025, critical vulnerabilities (CVE-2025-66478, CVSS 10.0) were discovered in React Server Components that could allow remote code execution. All Next.js 15.x and 16.x users should ensure they're running patched versions.

The fixed versions include:

• Next.js 15.0.5, 15.1.9, 15.2.6, 15.3.6, 15.4.8, 15.5.7
• Next.js 16.0.7 and later

Always keep your Next.js installation up to date to benefit from the latest security patches.

Summary

Next.js 16 brings significant improvements that will help developers build faster and more efficient applications. From stable Turbopack to new Cache Components, React Compiler support, and enhanced routing and caching APIs, there's plenty to be excited about.

Key takeaways:

• Turbopack is now the default bundler - expect 2-5x faster builds
• Cache Components provide explicit, flexible caching with the "use cache" directive
• React Compiler is stable but not enabled by default
• Next.js DevTools MCP enables AI-assisted debugging
• proxy.ts replaces middleware.ts for clearer network boundaries
• Enhanced routing with layout deduplication and incremental prefetching
• Updated caching APIs: revalidateTag(), updateTag(), and refresh()

Remember to read the upgrade guide carefully and test thoroughly before deploying to production. The breaking changes are minimal but important to understand.

Sources

• Next.js Blog - Next.js 16
• Next.js Blog - Building Next.js for an agentic future
• Next.js Blog - Security Advisory: CVE-2025-66478