Next.js 16: What Changed, What Breaks, and How to Upgrade Safely

Highlights

Next.js 16 shipped on October 21, 2025, and is the Active LTS major version.
Next.js 15 leaves Maintenance LTS on October 21, 2026, under the two-year rule in the support policy.
Turbopack is the default bundler, and Cache Components make caching opt-in.
proxy.ts is the new name for middleware.ts.
You need Node.js 20.9 or newer, and params must now be awaited.
A codemod handles much of the upgrade, but you still have to test.

The Deadline Hiding in Your package.json

Picture a developer named Meera. She runs a small online shop on Next.js 15, and it has worked well for a year. Then a teammate asks whether they're still covered by security updates. She checks the Next.js support policy and finds that 15.x sits in Maintenance LTS, which lasts two years from release. Next.js 15 arrived on October 21, 2024, so that window closes this Wednesday.

Nothing breaks on that day, and the site keeps running. But new security fixes stop landing for her version, so she starts planning the move to Next.js 16. (Meera is a made-up example, but plenty of teams are in her position.)

If that sounds familiar, this guide is for you. It covers what Next.js 16 changed, what might break, and how to move without a panic weekend.

What Is Next.js 16?

Next.js 16 is a major release of the React framework from Vercel, announced at Next.js Conf on October 21, 2025. It makes the faster Turbopack bundler the default, adds a more explicit caching model called Cache Components, and bundles React 19.2. It also renames request interception and removes some old behavior.

Since launch, the 16.x line has kept receiving minor releases. Check the official Next.js blog or npm for the exact current patch, because it changes often.

The Changes That Matter Most

1. Turbopack is now the default

Turbopack is a Rust-based bundler. In Next.js 16 it's used by default for next dev and next build, so the old --turbopack flag isn't needed. Vercel reports faster refreshes and builds, but results depend on your project, so measure your own.

A practical warning: if you have a custom Webpack configuration, test it early. That's the most common place for friction.

2. Cache Components make caching a choice

Older Next.js versions cached some things automatically, and that surprised many developers. Cache Components flip the idea. Dynamic code runs at request time by default, and you opt in to caching with the use cache directive.

// next.config.ts

const nextConfig = { cacheComponents: true };

export default nextConfig;

Think of a product page. The description rarely changes, so cache it. The cart is personal, so leave it dynamic. One page can hold both. This replaces the older experimental PPR setup.

Beginners shouldn't enable this just because it sounds fast. Decide first which data must be fresh.

3. proxy.ts replaces middleware.ts

The recommended file is now proxy.ts, with an exported function named proxy. It runs on the Node.js runtime and is meant to make the network boundary clearer. The old middleware.ts still exists for Edge-runtime cases, but it's deprecated.

import { NextResponse, type NextRequest } from "next/server";

export function proxy(request: NextRequest) {

return NextResponse.redirect(new URL("/home", request.url));

}

Use it for redirects, rewrites and request-level checks. It has nothing to do with JavaScript's built-in Proxy object.

4. Smarter navigation

Prefetching got smarter. Shared layouts aren't downloaded again for every link, and Next.js fetches only the parts a visitor doesn't already have. You don't change code to benefit, so for link-heavy sites such as stores and blogs it's a free improvement.

5. React Compiler is stable, but off by default

React Compiler can add memoization automatically. You switch it on with reactCompiler: true and install babel-plugin-react-compiler. It adds build-time work, so treat it as an experiment you can measure.

6. Smaller upgrades worth knowing

React 19.2: View Transitions, useEffectEvent and <Activity />.
DevTools MCP: lets AI coding assistants see routing, caching and log context.
Cleaner build output: timing is broken down by stage.
Turbopack file system caching: introduced in beta, and stable for next dev as of 16.1.

Breaking Changes: The Part You'll Actually Feel

Change	What to do
Node.js 18 dropped	Use Node.js 20.9 or newer (node -v)
TypeScript minimum raised	Use TypeScript 5.1 or newer
params / searchParams are async	Use await params in pages and layouts
next lint removed	Run ESLint or Biome directly
middleware.ts deprecated	Rename to proxy.ts when ready
Image defaults changed	Review images settings in next.config
AMP support removed	Plan alternatives if you used it

The async params change is the one most likely to trip you up:

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {

const { slug } = await params;

return <h1>{slug}</h1>;

}

The same rule applies to cookies(), headers() and draftMode().

How to Upgrade From Next.js 15 to 16

Here is the order I'd follow, shaped for a cautious team.

Commit your work. Work on a separate Git branch.
Check Node.js. Anything below 20.9 must be upgraded first.
Run the codemod. npx @next/codemod@canary upgrade latest handles many routine changes.
Update packages. npm install next@latest react@latest react-dom@latest
Fix what the build reports. Start with async params and any linting scripts.
Run a production build. Use npm run build && npm run start, then click through the real site.
Test the risky areas. Check login, forms, Server Actions, redirects, images, metadata and third-party packages.
Deploy to staging first. Then release gradually if your platform allows.

A green build doesn't prove everything works. It only proves the code compiles.

Does Next.js 16 Help SEO?

It doesn't rank pages for you, but it supports the technical groundwork: server rendering, metadata handling, fast navigation and image optimization. Content quality, internal linking and search intent still decide results, and no framework guarantees rankings.

If you're building on it, these guides pair well with this one:

After upgrading, recheck your titles, canonical tags and sitemap, as covered in the Next.js sitemap and robots.txt guide. A framework upgrade can quietly change what search engines see.

Common Mistakes to Avoid

Upgrading on main. Always use a branch.
Skipping the Node.js check. It's the quickest failure to prevent.
Turning on every new feature at once. Upgrade first, then adopt Cache Components or React Compiler one at a time.
Over-caching. Stale prices or stock counts hurt users more than slow pages.
Forgetting dependencies. Some packages lag behind new Next.js versions.

New to routing concepts? Read App Router vs Pages Router before you start.

Back to Meera

Meera didn't rewrite her shop. She upgraded Node.js, ran the codemod on a branch, fixed her async params pages, and tested checkout twice. Cache Components and React Compiler went onto a "later" list. The whole point was to stay on a supported version, not to chase every feature, and that's a sensible goal for most teams.

Key Takeaways

Next.js 16 launched on October 21, 2025, and is the Active LTS major.
Next.js 15's Maintenance LTS ends October 21, 2026, so plan your upgrade now.
Turbopack is the default bundler, and Cache Components make caching explicit.
proxy.ts is the recommended replacement for middleware.ts.
Node.js 20.9+, async params, and removal of next lint are the main migration items.
Use the official codemod, then test a production build by hand.
Adopt advanced features gradually after the upgrade is stable.

FAQ

1. What is Next.js 16?
It is a major version of Vercel's React framework, released October 21, 2025. It brings Turbopack as the default bundler, Cache Components, React 19.2 support and a renamed request layer.

2. What Node.js version does Next.js 16 need?
Node.js 20.9 or newer. Node.js 18 is no longer supported.

3. What replaced middleware.ts in Next.js 16?
proxy.ts, with a function named proxy. It runs on the Node.js runtime. middleware.ts still works for Edge use cases but is deprecated.

4. Is Next.js 15 end of life?
Next.js 15 is in Maintenance LTS, which lasts two years from its October 21, 2024 release, so it ends October 21, 2026. Confirm the status on the official support policy.

5. How do I upgrade from Next.js 15 to 16?
Check your Node.js version, run npx @next/codemod@canary upgrade latest, update next, react and react-dom, fix async params, then build and test thoroughly. See the official upgrade guide.

Conclusion

Next.js 16 matters for two reasons: it's faster and more explicit, and the version before it is about to lose support. You don't need every new feature on day one. Upgrade carefully, test what customers actually use, and adopt the advanced pieces when you have a reason to.

For more practical guides, browse SEO Insights.

Next.js 16 Guide: New Features, Breaking Changes & Upgrade