Retour au blog

Next.js 16

Written by

Oussama Dabachil@oussama-dabachil

Ahead of our upcoming Next.js Conf 2025, Next.js 16 is now available.

This release provides the latest improvements to Turbopack, caching, and the Next.js architecture. Since the previous beta release, we added several new features and improvements:

New Features and Improvements

Cache Components

Cache Components are a new set of features designed to make caching in Next.js both more explicit, and more flexible. They center around the new "use cache" directive, which can be used to cache pages, components, and functions, and which leverages 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.

const nextConfig = { cacheComponents: true, }; export default nextConfig;

Next.js Devtools MCP

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

The Next.js DevTools MCP provides AI agents with:

  • Next.js knowledge: Routing, caching, and rendering behavior
  • Unified logs: Browser and server logs without switching contexts
  • Automatic error access: Detailed stack traces without manual copying
  • Page awareness: Contextual understanding of the active route

proxy.ts (formerly middleware.ts)

proxy.ts replaces middleware.ts and makes the app's network boundary explicit. proxy.ts runs on the Node.js runtime.

What to do: Rename middleware.ts → proxy.ts and rename the exported function to proxy. Logic stays the same.

Why: Clearer naming and a single, predictable runtime for request interception.

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

Logging Improvements

In Next.js 16 the development request logs are extended showing where time is spent:

  • Compile: Routing and compilation
  • Render: Running your code and React rendering

The following features were previously announced in the beta release:

Turbopack (stable)

Turbopack has reached stability for both development and production builds, and is now the default bundler for all new Next.js projects.

With Turbopack, you can expect:

  • 2–5× faster production builds
  • Up to 10× faster Fast Refresh

React Compiler Support (stable)

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

Enhanced Routing and Navigation

Next.js 16 includes a complete overhaul of the routing and navigation system, making page transitions leaner and faster.

  • Layout deduplication: When prefetching multiple URLs with a shared layout, the layout is downloaded once instead of separately for each Link.
  • Incremental prefetching: Next.js only prefetches parts not already in cache, rather than entire pages.

Improved Caching APIs

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

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

updateTag() (new): A new Server Actions-only API that provides read-your-writes semantics.

refresh() (new): A new Server Actions-only API for refreshing uncached data only.

React 19.2 and Canary Features

The App Router in Next.js 16 uses the latest React Canary release, which includes:

  • View Transitions: Animate elements that update inside a Transition or navigation
  • useEffectEvent: Extract non-reactive logic from Effects into reusable Effect Event functions
  • Activity: Render "background activity" by hiding UI with display: none while maintaining state

Breaking Changes and Other Updates

Version Requirements

  • Node.js 20.9+ - Minimum version now 20.9.0 (LTS); Node.js 18 no longer supported
  • TypeScript 5+ - Minimum version now 5.1.0
  • Browsers - Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

Removals

These features were previously deprecated and are now removed:

  • AMP support - All AMP APIs and configs removed
  • next lint command - Use Biome or ESLint directly
  • serverRuntimeConfig, publicRuntimeConfig - Use environment variables (.env files)
  • experimental.ppr flag - PPR flag removed; evolving into Cache Components

Behavior Changes

  • Default bundler: Turbopack is now the default bundler for all apps
  • images.minimumCacheTTL default: Changed from 60s to 4 hours
  • Sync params, searchParams: Must use async: await params, await searchParams
  • Sync cookies(), headers(): Must use async: await cookies(), await headers()

Upgrade to Next.js 16

# Use the automated upgrade CLInpx @next/codemod@canary upgrade latest# ...or upgrade manuallynpm install next@latest react@latest react-dom@latest# ...or start a new projectnpx create-next-app@latest