Next.js 16: tutte le novità che ti tocca ingoiare
Next.js 16 è atterrato e, indovina, nessuno ti ha chiesto nulla. La doc ufficiale butta tutto nella guida di upgrade: o la leggi o ti arriva addosso. Saltiamo la marchetta: ecco cosa devi digerire per restare in corsa.
Ambiente: niente più scuse
Sei ancora su Node 18? Sbagliato. Next.js 16 pretende Node 20.9 minimo, TypeScript 5.1+ e browser moderni (Chrome/Edge/Firefox 111+, Safari 16.4+). Se il tuo parco non regge, resti alla 15 con le sue falle. Fine della storia.
Turbopack diventa lo standard
Dimentica il flag --turbopack. Il motore è attivo di default in dev e build, con la config spostata alla radice (turbopack invece di experimental.turbopack). Hai ancora un webpack custom? La build ora esplode apposta così smetti di ignorarlo. Puoi sempre passare --webpack per rimandare la resa, ma Turbopack è la strada ufficiale, con cache su disco in dev e addio import Sass col tilde.
API HTTP totalmente asincrone
Next.js 15 lasciava un'uscita sincrona per cookies, headers, draftMode, params e searchParams. Finito: tutto diventa async, compresi opengraph-image, twitter-image, icon e apple-icon. Usi ancora le firme legacy? Preparati a spargere await. In regalo, next typegen ora genera helper (PageProps, LayoutProps, RouteContext) così non anneghi nei tipi.
Lato React: 19.2 e compilatore stabilizzato
Next.js 16 porta React 19.2 (canary) con tutto il carrozzone: View Transitions, useEffectEvent, Activity. In più il React Compiler diventa opzione stabile (reactCompiler: true). Sì, la build si allunga perché Babel compila ancora dietro le quinte, ma ottieni memoizzazione automatica senza trafficare con memo.
Cache Components e navigazione più sveglia
Il vecchio flag experimental_ppr sparisce. Entra cacheComponents per attivare l'ultima iterazione del Partial Pre-Rendering. Le transizioni SPA prefetchano con più furbizia: deduplicazione dei layout, prefetch incrementale… Più richieste, molta meno banda. Volevi comfort? Eccolo, senza toccare codice.
Nuove API di cache: revalidateTag, updateTag, refresh
Lo strato cache si mette in palestra:
revalidateTag(tag, cacheLife)accetta un profilo di durata per aggiornare con calma.updateTag(tag)porta un read-your-writes immediato nelle Server Actions.refresh()ti lascia rinfrescare il router client subito dopo un'azione server.cacheLifeecacheTagsi liberano finalmente del prefissounstable_.
O sfrutti l'occasione per chiarire la strategia di revalidazione, o continui con i cerotti sperando che lo stato non imploda.
middleware è morto, viva proxy
I file middleware.{js,ts} diventano proxy. Il runtime è bloccato su nodejs, edge resta fuori (per ora). Stessa sorte per le opzioni: skipMiddlewareUrlNormalize diventa skipProxyUrlNormalize. La doc ti tiene per mano, ma sì, ti tocca rinominare in serie.
Immagini: stretta necessaria
La vacca sacra next/image incassa diversi colpi:
- Le query string sulle immagini locali ora richiedono
images.localPatterns.search. minimumCacheTTLsale di default a 4 h per calmare la frenesia di revalidazione.- La misura
16sparisce daimageSizes,qualitiessi restringe a[75]e gli IP locali sono bloccati senzadangerouslyAllowLocalIP. - I redirect si fermano a 3 e
next/legacy/imagesaluta. images.domainsviene deprecato in favore diremotePatterns.
Se hai lasciato quella config allo sbando, aspettati sorprese in produzione.
DX: output separati, ESLint fai-da-te, lo scroll resta al suo posto
next dev e next build ora scrivono in cartelle diverse (.next/dev per dev) e si bloccano a vicenda per evitare doppie istanze. Il caricamento di next.config è stato ripulito, quindi addio hack con process.argv.includes('dev').
Sul fronte lint, next lint sparisce. Resti con la CLI vanilla di ESLint (o Biome se ti piace soffrire) e adotti la flat config imposta da @next/eslint-plugin-next. E se forzavi lo scroll istantaneo, aggiungi data-scroll-behavior="smooth" su <html>: Next.js finalmente lascia stare il tuo CSS.
Alpha e briciole varie
- Build Adapters API (alpha): un hook sperimentale per far trafficare la tua infra con la pipeline di build.
- API Sass moderna grazie a
sass-loaderv16. - AMP,
next lint,serverRuntimeConfig/publicRuntimeConfig,devIndicatorsbizzarri,experimental.dynamicIOeunstable_rootParamsfiniscono nel cestino.
Volevi un “framework full-stack”? Next.js 16 ti ricorda chi comanda. Allineati — npm install next@latest react@latest react-dom@latest, gli @types se vivi di TypeScript, npx @next/codemod@canary upgrade latest — oppure piagnucola. Ci vediamo alla prossima cannonata.
