Next.js 16: todas las novedades que vas a tragar sí o sí

Next.js 16 ya cayó y, sorpresa, nadie te pidió la opinión. La doc oficial amontona cada cambio en la guía de actualización, así que o la lees o te explota en la cara. Ahorremos el marketing: esto es lo que tienes que asumir para seguir en la partida.

Entorno: se acabaron las excusas

¿Sigues con Node 18? Mala apuesta. Next.js 16 exige Node 20.9 mínimo, TypeScript 5.1+ y navegadores modernos (Chrome/Edge/Firefox 111+, Safari 16.4+). Si tu parque no llega, te quedas en la 15 con sus agujeros de seguridad. Ni tratos ni compasión.

Turbopack es la base

Olvida el flag --turbopack. El motor está activado por defecto en dev y build, con la config subida a la raíz (turbopack en vez de experimental.turbopack). ¿Aún agarrado a un webpack custom? La build ahora revienta a propósito para que dejes de mirar a otro lado. Sí, puedes añadir --webpack para alargar la agonía, pero Turbopack es la vía oficial, ahora con caché en disco para dev y sin imports Sass con tilde.

APIs HTTP 100 % asíncronas

Next.js 15 dejó una salida sincrónica temporal para cookies, headers, draftMode, params y searchParams. Se acabó: todo pasa a async, también opengraph-image, twitter-image, icon y apple-icon. ¿Aún con las firmas legacy? Ve calentando los await. Extra: next typegen ahora genera helpers (PageProps, LayoutProps, RouteContext) para no ahogarte en tipos.

Lado React: 19.2 y compilador estabilizado

Next.js 16 embarca React 19.2 (canary) y toda su troupe: View Transitions, useEffectEvent, Activity. Encima, el React Compiler pasa a opción estable (reactCompiler: true). Sí, las builds se alargan porque Babel sigue transpilando por detrás, pero consigues memoización automática sin sobar memo a mano.

Cache Components y navegación más lista

El vetusto flag experimental_ppr desaparece. En su lugar, Next.js introduce cacheComponents para activar la última iteración del Partial Pre-Rendering. Las transiciones SPA precargan con más mala idea: deduplicación de layouts, prefetch incremental… Más peticiones, mucha menos carga. Querías comodidad: aquí la tienes sin tocar una línea.

Nuevas APIs de caché: revalidateTag, updateTag, refresh

La capa de caché se pone a tono:

• revalidateTag(tag, cacheLife) acepta un perfil de duración para refrescar con calma.
• updateTag(tag) trae read-your-writes inmediato a las Server Actions.
• refresh() te deja refrescar el router del cliente justo después de una acción servidor.
• cacheLife y cacheTag por fin se quitan el prefijo unstable_.

O aprovechas para aclarar tu estrategia de revalidación, o sigues parcheando y rezando para que el estado no haga explosión.

middleware ha muerto, larga vida a proxy

Los archivos middleware.{js,ts} pasan a llamarse proxy. El runtime queda clavado en nodejs; edge queda fuera (de momento). Igual para las opciones: skipMiddlewareUrlNormalize se convierte en skipProxyUrlNormalize. La doc te lleva de la mano, pero sí, toca renombrar en cadena.

Imágenes: aprietan las tuercas

La vaca sagrada next/image se come varios golpes:

• Las query strings sobre imágenes locales ahora requieren images.localPatterns.search.
• minimumCacheTTL sube por defecto a 4 h para calmar la histeria de revalidaciones.
• El tamaño 16 desaparece de imageSizes, qualities se queda en [75] y las IP locales se bloquean salvo que actives dangerouslyAllowLocalIP.
• Las redirecciones se limitan a 3 y next/legacy/image se despide.
• images.domains queda deprecado a favor de remotePatterns.

Si dejaste esa config a la buena de Dios, prepárate para las sorpresas en producción.

DX: salidas separadas, ESLint DIY, el scroll se respeta

next dev y next build ahora escriben en carpetas distintas (.next/dev para dev) y se bloquean mutuamente para evitar dobles instancias. La carga de next.config se racionaliza, así que tus apaños con process.argv.includes('dev') pasan a mejor vida.

En linting, next lint desaparece. Te quedas con la CLI vanilla de ESLint (o Biome si te va el masoquismo) y migras a la flat config que impone @next/eslint-plugin-next. Y si forzabas el scroll instantáneo, añade data-scroll-behavior="smooth" en <html>: Next.js por fin deja tu CSS tranquilo.

Alfas y migajas varias

• Build Adapters API (alpha): un hook experimental para que tu infra meta mano en la pipeline de build.
• API Sass moderna gracias a sass-loader v16.
• AMP, next lint, serverRuntimeConfig/publicRuntimeConfig, devIndicators raros, experimental.dynamicIO y unstable_rootParams van al cubo.

¿Querías “framework full-stack”? Next.js 16 te recuerda quién manda. O te alineas —npm install next@latest react@latest react-dom@latest, los @types si vas de TypeScript, npx @next/codemod@canary upgrade latest— o te vas a llorar. Nos vemos en la próxima descarga.