Next.js 15 e React 19: cosa cambia (e cosa rompe) sui progetti reali

Il 21 ottobre 2024, al Next.js Conf, Vercel ha rilasciato la versione 15 stabile. È la release più impattante dalla 13: async request APIs, un modello di caching ripensato, React 19 RC come default e il React Compiler in beta. Vediamo cosa significa per i progetti reali.

Async Request APIs (breaking)

Funzioni come cookies(), headers(), params e searchParams diventano async. Fino a Next 14 si scriveva:

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

Ora va scritto:

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

Il motivo: il framework ora può iniziare a renderizzare prima che la request sia completamente parsata, riducendo la latenza. Esiste un codemod ufficiale (npx @next/codemod next-async-request-api) che fa il 90% del lavoro. Il restante 10% va aggiustato a mano, soprattutto dove c'erano destrutturazioni inline.

Caching meno aggressivo

La 14 cachava di default: fetch, route handlers GET, client router. Era una scelta divisiva. Nella 15 il default è invertito:

• fetch: non cachata di default. Per cachare serve cache: "force-cache" esplicito.
• Route handlers GET: non cachati di default.
• Client router cache: timeline ridotta.

Per chi aveva costruito la sua app contando sul caching automatico, la migrazione richiede attenzione. Per chi (come noi) ha sempre messo revalidate esplicito, è una semplificazione mentale.

React 19 e useActionState

React 19 è arrivato come default con la 15. La novità più rilevante per chi lavora con Server Actions è useActionState (ex useFormState): un hook unificato per gestire lo stato di un'action — pending, errore, valore di ritorno — senza scrivere reducer manuali.

"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

Il React Compiler automatizza memoization, eliminando la necessità di useMemo, useCallback e memo manuali nella maggior parte dei casi. È in beta, abilitabile via Babel plugin. Sui nostri test su una app interna, abbiamo visto -8% sui re-render senza modifiche al codice. Per progetti grandi vale la pena attivarlo in staging.

Form prop nativa

I tag <form> in React 19 supportano direttamente una funzione come action: niente più hack di onSubmit. Si combina perfettamente con le Server Actions e con useActionState.

La nostra strategia di migrazione

1. Aggiornare a Next 14.2 e applicare i codemod di async request APIs in modo opportunistico (sono compatibili).
2. Promuovere a 15 in staging, due settimane di osservazione.
3. Rivedere ogni fetch e ogni route handler dove ci si aspettava il caching default.
4. React Compiler in opt-in, non subito su tutto.

Next.js 15 è una release di passaggio: rompe poco se hai scritto il codice in modo ortodosso, rompe parecchio se hai sfruttato le sfumature del caching della 14. Pianifica la migrazione, non improvvisarla.