What’s New in Next.js 16?

Last week, our team got the pleasure of attending one of our favorite annual events in San Francisco: Next.js Conf 2025 - and the big headline was clear: Next.js 16 is here! The Next 16 release brings the most significant architectural and developer experience updates since the App Router. In the Developer Experience world, we call this a huge win.

If you’re building with Next.js, whether that’s on Catalyst, your own storefront, or a custom Commerce integration, there’s a lot to get excited about.

Let’s jump into some of the updates!

Turbopack is now the default

After two years in beta, Turbopack is finally stable and is now the default bundler for all Next.js apps.

Turbopack delivers what developers have been hoping for:

2–5x faster production builds
Up to 10x faster Fast Refresh during development
File system caching (beta) for near-instant restarts on large projects

Vercel reports that more than half of all development sessions on Next.js 15.3+ were already using Turbopack successfully.

To enable filesystem caching:

Webpack isn’t gone yet, but for most teams, Turbopack will now just work with no configuration required.

Cache components and partial pre-rendering

One of the most impactful changes in Next.js 16 is the new Cache Components model.

If you’ve been following the evolution of Partial Pre-Rendering (PPR), this completes that story. You can now use the new "use cache" directive to control exactly what gets cached at the component, page, or function level.

Instead of implicit caching behind the scenes, Next.js now makes it explicit and opt-in, so dynamic behavior stays dynamic and static stays fast.

For commerce apps, especially ones mixing static catalog data with dynamic pricing or personalization, this model offers much more predictable performance and fewer surprises.

📖 Cache Componenets Documentation

Next.js DevTools MCP: AI-Assisted Debugging

Next.js 16 introduces DevTools MCP (Model Context Protocol), a new foundation for AI-assisted debugging and development.

The DevTools MCP lets AI agents understand your app contextually, including routes, cache state, logs, and stack traces, and help diagnose issues or explain behavior without leaving your editor.

It’s an early step, but it hints at a future where your devtools can reason about your app and assist you contextually, not just syntactically.

📖 Using AI Agents with Next.js DevTools MCP Documentation

proxy.js: Middleware Simplified

Goodbye, middleware.ts. Hello, proxy.js.

The middleware layer has been replaced with a clearer, more predictable proxy layer that explicitly defines your network boundary and always runs on the Node.js runtime.

Migration is simple:

middleware.ts continues to work with full backwards compatibility, but proxy.js is now the recommended approach for new projects. The migration is straightforward, and you can update at your own pace.

📖 Proxy, formerly middleware

Routing, Prefetching & Performance

Routing and prefetching got a serious overhaul. Layouts are now deduplicated, so shared layouts are downloaded only once across multiple routes, and incremental prefetching ensures that only uncached chunks load.

No code changes are required. It’s all built into the router. In simplest terms:

Navigations feel snappier
Prefetches are smaller and smarter
You’ll likely see more requests, but much less total transfer size

🧩 Improved Caching APIs

Two new APIs refine how developers handle revalidation and cache updates:

updateTag() provides read-your-writes semantics, ideal for user updates or forms
refresh() refreshes uncached data only, perfect for live metrics, notifications, or anything ephemeral

And the existing revalidateTag() now takes a second argument for cache-life profiles:

These APIs bring clarity to cache invalidation, a place where many apps have struggled to stay consistent.

📖 Caching in Next.js

⚛️ React Compiler & React 19.2

Next.js 16 ships with stable React Compiler support and React 19.2, giving developers automatic memoization and smoother UI transitions.

Highlights include:

useEffectEvent(), a cleaner way to isolate non-reactive logic
View Transitions, built-in page animations for smoother route changes
<Activity />, a new primitive for maintaining state during background updates

If you’ve ever struggled with unnecessary re-renders or page flickers in commerce flows, these updates are a big step forward.

📖 React 19.2

🛠 Why is this such a pivotal release?

Next.js 16 isn’t just faster, it’s clearer, more explicit, and better aligned with the modern web stack.

For developers, that translates into:

Easier debugging with transparent caching
Faster feedback loops with Turbopack
Smarter, AI-powered tooling
Cleaner network boundaries and routing

If you’re building on Next.js today, whether it’s a custom storefront, an app extension, or a full-stack commerce experience, this release sets the stage for a faster, more maintainable future.

🚀 Getting Started

Ready to start experimenting with Next.js 16?

💥Try It Out Locally

To create a new app with Next.js 16: npx create-next-app@latest

Or to upgrade an existing project: npx @next/codemod@canary upgrade latest

Take advantage of the new caching APIs, run your builds on Turbopack, and explore the simplified proxy layer. Each of these features aims to make building fast, resilient commerce experiences simpler than ever. Here are some key resources and guides to help you implement the new features:

💥Official Documentation & Recommended Reading