Next.js 16: The Update That Finally Feels Built for Developers

Oct 15, 2025

Next.js 16 just dropped, and this is not a minor update. We’re talking Turbopack being stable, React Compiler built right in, routing that’s finally smart, and new caching APIs that genuinely solve problems. Let me walk you through the important features with examples and the breaking changes you need to know about.

My original published story

Turbopack Has Finally Reached Stability

Turbopack has reached stability for both development and production. It’s the default bundler for all applications now. More than 50% of development sessions and 20% of production builds on Next.js 15.3+ are already running on Turbopack.

Want to stick with webpack? Just run:

next dev --webpack
next build --webpack

With Turbopack, you get:

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

Zero config needed.

Turbopack File System Caching (Beta)

Turbopack now supports file system caching in development. This stores build artifacts on disk for significantly faster compile times across restarts. Huge for monorepos.

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

All internal Vercel apps are already using this and seeing notable improvements.

Simplified create-next-app

create-next-app has been redesigned with a simplified setup flow. The new template includes App Router by default, TypeScript-first configuration, Tailwind CSS, and ESLint.

React Compiler Support (Stable)

Built-in support for React Compiler is now stable. You get automatic memoization without useMemo or useCallback. The compiler handles it all.

const nextConfig = {
  reactCompiler: true,
};

Install the compiler plugin:

npm install babel-plugin-react-compiler@latest

Note: Expect higher compile times as React Compiler relies on Babel.

New Caching APIs

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

`revalidateTag()` Now Requires Cache Profiles

revalidateTag() now requires a cacheLife profile as the second argument. This is useful when you only want to purge the cache of a specific page section instead of the entire page.

// Recommended for most cases
revalidateTag(’blog-posts’, ‘max’);

// Other built-in profiles
revalidateTag(’news-feed’, ‘hours’);
revalidateTag(’analytics’, ‘days’);

// Custom revalidation time
revalidateTag(’products’, { revalidate: 3600 });

They recommend ‘max’ for most cases. It enables background revalidation for long-lived content. When users request tagged content, they receive cached data immediately while Next.js revalidates in the background.

Perfect for blog posts, analytics, or dashboards that don’t need instant updates.

`updateTag()`

Server Actions-only API that provides read-your-writes semantics, expiring and immediately refreshing cached data within the same request.

‘use server’;
import { updateTag } from ‘next/cache’;

export async function updateUserProfile(userId, profile) {
  await db.users.update(userId, profile);
  updateTag(`user-${userId}`);
}

Unlike revalidateTag(), this is instant. Perfect for user settings, profiles, dashboards where users expect immediate feedback after mutations.

`refresh()` For Uncached Data Only

Server Actions-only API for refreshing uncached data only. Doesn’t touch the cache at all.

‘use server’;
import { refresh } from ‘next/cache’;

export async function markNotificationAsRead(notificationId) {
  await db.notifications.markAsRead(notificationId);
  refresh();
}

Use this for notification badges, cart counts, live metrics. Your static shell stays fast while dynamic bits update.

This is complementary to the client-side router.refresh().

Build Adapters API (Alpha)

Create custom adapters that hook into the build process for deploying to your own infrastructure.

const nextConfig = {
  experimental: {
    adapterPath: require.resolve(’./my-adapter.js’),
  },
};

Deploy to Cloudflare Workers, upload assets to S3, or use your internal platform. Next.js is becoming truly modular.

Enhanced Routing and Navigation

Complete overhaul of the routing system. Page transitions are now leaner and faster.

Layout Deduplication: When prefetching multiple URLs with a shared layout, the layout downloads once instead of separately for each link. A page with 50 product links now downloads the shared layout once instead of 50 times.

Incremental Prefetching: Next.js only prefetches parts not already in cache. The prefetch cache now cancels requests when links leave the viewport, prioritizes prefetching on hover, and re-prefetches when data is invalidated. Works seamlessly with Cache Components.

Trade-off: More individual requests, but much lower total transfer sizes. No code modifications needed.

Cache Components and PPR

Next.js 16 removes the experimental PPR flag. PPR is being integrated into Cache Components.

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

Partial Pre-Rendering loads your static content first, and dynamic content gets streamed in. With Cache Components, it can figure out what to cache and what not to cache. More details coming before Next.js Conf.

Important: If you rely on experimental.ppr = true, stay on your current Next.js canary version. Migration guide coming ahead of stable release.

React 19.2 Integration

Next.js 16 uses the latest React Canary release with React 19.2 features:

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

Version Requirements

Node.js 20.9+ (Node.js 18 no longer supported)
TypeScript 5.1.0+
Browsers: Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

Key Removals

AMP support removed entirely
next lint command removed (use ESLint directly, codemod available: npx @next/codemod@canary next-lint-to-eslint-cli)
Runtime configs removed (use .env files)
experimental.ppr flag removed (use experimental.cacheComponents)
Sync access to params, searchParams, cookies, headers, draftMode now requires await
next/image local src with query strings now requires images.localPatterns config

Behavior Changes

Turbopack is default (opt out with --webpack)
images.minimumCacheTTL: Changed from 60s to 4 hours (14400s)
images.imageSizes: Removed 16 from default sizes
images.qualities: Changed from [1..100] to [75]
images.dangerouslyAllowLocalIP: Blocks local IP optimization by default
images.maximumRedirects: Changed from unlimited to 3 maximum
revalidateTag(): Now requires cacheLife profile as second argument
Parallel routes: All slots now require explicit default.js files
Dev and build: Now use separate output directories
Terminal output: Redesigned with clearer formatting
Babel in Turbopack: Auto-enables if config found
Modern Sass API: Bumped sass-loader to v16

Deprecations

middleware.ts: Rename to proxy.ts to clarify network boundary and routing focus
next/legacy/image: Use next/image instead
images.domains: Use images.remotePatterns instead
revalidateTag() single argument: Use two-argument form or updateTag()

Additional Improvements

Performance optimizations for next dev and next start commands
Node.js native TypeScript for next.config.ts with --experimental-next-config-strip-types flag

Final Thoughts

Next.js 16 is packed with quality-of-life features. The new caching APIs solve real problems, routing feels instant, and Turbopack brings performance gains to everyone. More features are dropping before Next.js Conf in two weeks.

Start testing the beta. These features will make their way into your daily coding habits.

Developer's Journey

Discussion about this post