Next.js 15 and React 19: what changes (and what breaks) in real projects

On October 21, 2024, at Next.js Conf, Vercel shipped Next.js 15 stable. It is the most impactful release since 13: async request APIs, a reworked caching model, React 19 RC as default and the React Compiler in beta. Here is what it means in production.

Async Request APIs (breaking)

Functions like cookies(), headers(), params and searchParams become async. Until Next 14 you wrote:

const cookieStore = cookies();
const token = cookieStore.get("session");

Now it must be:

const cookieStore = await cookies();
const token = cookieStore.get("session");

Why: the framework can now start rendering before the request is fully parsed, cutting latency. An official codemod (npx @next/codemod next-async-request-api) does 90% of the work. The remaining 10% must be fixed by hand, especially around inline destructuring.

Less aggressive caching

14 cached by default: fetch, GET route handlers, client router. Divisive. In 15 the defaults flip:

• fetch: not cached by default. To cache, use explicit cache: "force-cache".
• GET route handlers: not cached by default.
• Client router cache: shorter window.

For anyone who built their app on automatic caching, migration requires attention. For those (like us) who always set explicit revalidate, it is a mental simplification.

React 19 and useActionState

React 19 arrived as default in 15. The most relevant addition for Server Actions is useActionState (formerly useFormState): a unified hook for action state — pending, error, return value — without hand-rolled reducers.

"use client";
import { useActionState } from "react";
import { createLead } from "./actions";

export function LeadForm() {
  const [state, action, pending] = useActionState(createLead, null);
  return (
    <form action={action}>
      <input name="email" />
      <button disabled={pending}>Send</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

React Compiler in beta

The React Compiler automates memoization, removing the need for manual useMemo, useCallback and memo in most cases. Beta, opt-in via Babel plugin. On our tests on an internal app we saw -8% re-renders without code changes. For large projects, worth enabling in staging.

Native form prop

React 19 <form> tags now natively accept a function as action: no more onSubmit hacks. Pairs perfectly with Server Actions and useActionState.

Our migration strategy

1. Bump to Next 14.2 and apply async request API codemods opportunistically (they are compatible).
2. Promote to 15 in staging, two weeks observation.
3. Audit every fetch and route handler where you relied on default caching.
4. Opt-in to React Compiler, not blanket-on.

Next.js 15 is a transition release: it breaks little if your code is orthodox, a lot if you leaned on 14's caching nuances. Plan the migration, do not improvise it.