Next.js 16: React 19.2 Features, Breaking Changes, and How to Upgrade

React 19.2

Next.js 16 ships with React 19.2. Three features worth knowing:
View Transitions — animate elements that update inside a Transition or navigation. The transitionTypes prop on <Link> lets you specify which animation plays per navigation:

<Link href="/about" transitionTypes={['slide-left']}>
  About
</Link>

<Link href="/back" transitionTypes={['slide-right']}>
  Go Back
</Link>

Different animations for different navigation directions. Requires CSS @view-transition rules to define the actual animations.

useEffectEvent() — extract non-reactive logic from Effects into reusable event functions. Solves the long-standing problem of needing values in an Effect without re-running the Effect when those values change.

<Activity/> — render background UI with display: none while maintaining state and cleaning up Effects. Useful for keeping component state alive for routes that aren't currently visible.

Developer Experience

Server Function logging — terminal now logs every Server Function call during development. Shows function name, arguments, and execution time. No more guessing whether your server action ran or how long it took.
Hydration Diff Indicator (16.2) — when a hydration mismatch occurs the error overlay shows a + Client / - Server diff. Previously you got a confusing wall of text. Now it's immediately clear.

Error cause chains (16.2) — the error overlay shows Error.causechains up to 5 levels deep. When errors wrap other errors you see the full chain, not just the outermost error.

--inspect for next start (16.2) — attach the Node.js debugger to your production server. 16.1 had this for next dev. 16.2 extends it to production.

next upgrade CLI (16.1) — run next upgrade to automatically update Next.js, React dependencies, and TypeScript types to the latest stable release. No more manually matching version numbers.

ImageResponse 2–20x faster (16.2) — significant if you're generating OG images dynamically. Basic images are 2x faster. Complex images up to 20x faster.

proxy.ts replaces middleware.ts — rename middleware.ts to proxy.ts and the exported function to proxy. Logic stays identical. middleware.ts still works but is deprecated. The new name makes it clearer this file controls the network boundary of your application.

Improved build and dev logging — build output now shows time taken per step. Dev logs show compile time and render time separately so you can see where time is actually spent.

Breaking Changes

These are the ones most likely to affect existing projects.

Async params required — params and searchParams must be awaited. The sync access pattern is removed.

// Before Next.js 16 — broken now
export default function Page({ params }) {
  const { id } = params // throws in Next.js 16
}

// Next.js 16 — required
export default async function Page({ params }) {
  const { id } = await params
}

Async cookies/headers — await cookies(), await headers(), await draftMode() required. Same pattern as params.

Node.js 20.9+ required — Node.js 18 is dropped. Check your hosting environment before upgrading.

Parallel routes require default.js — all parallel route slots need explicit default.js files. Builds fail without them. Create a default.js that calls notFound() or returns null.

experimental.ppr flag removed — replaced by cacheComponents: true in config.

next lint command removed — run ESLint directly. next build no longer runs linting.

AMP support removed — all AMP APIs and configs gone. No replacement.
serverRuntimeConfig and publicRuntimeConfig removed — use .env files instead.

Image defaults changed — images.minimumCacheTTL changed from 60s to 4 hours. images.qualities default changed to [75]. images.imageSizes no longer includes 16.

Upgrading

The automated upgrade CLI handles most breaking changes:

npx @next/codemod@canary upgrade latest

This runs codemods for async params, cookies, headers, and other mechanical changes. Review the output and handle edge cases manually. Most projects migrate without major issues.

If you're starting a fresh Next.js 15/16 project, LettStart Design has admin dashboard and landing page templates built on Next.js + Bootstrap 5 — already TypeScript-first and component-based. Saves a few days of boilerplate.