NextJS 16: Que hay de nuevo

NextJS 16 trae cambios importantes en caching, bundling y APIs. Esta pagina es tu checklist de migracion desde v15.

Checklist de cambios

Nuevas features

v16Nuevo Directiva "use cache"

El nuevo sistema de caching reemplaza unstable_cache y simplifica toda la configuracion de cache. Ahora marcas funciones o componentes completos con "use cache" y Next.js se encarga del resto.

// Antes (v15): unstable_cache, configurar revalidate en fetch, etc.
// Ahora (v16): una directiva y listo

async function getProducts() {
  "use cache"
  const res = await fetch("https://api.example.com/products")
  return res.json()
}

Ver Data Fetching y use cache →

v16Nuevo Turbopack estable y por defecto

Turbopack ya no es experimental. Es el bundler por defecto en next dev. El cold start es hasta 10x mas rapido que Webpack y el HMR es casi instantaneo.

# Turbopack se usa automaticamente
next dev

# Si necesitas Webpack por compatibilidad
next dev --webpack

Ver Instalacion →

Cambios importantes

v16Cambio params y searchParams son async

En v15 ya estaba deprecado el acceso sincrono. En v16 es obligatorio usar await.

// v15 (funcionaba pero con warning)
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>
}

// v16 (obligatorio)
export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <div>{id}</div>
}

Ver Rutas Dinamicas →

v16Cambio React 19 por defecto

NextJS 16 usa React 19 con todas sus features: Actions, useOptimistic, useFormStatus, use() y mas.

Ver Server Components →

v16Cambio Node.js 20.9+ minimo

Se elimina el soporte para Node.js 18. Necesitas Node.js 20.9 o superior.

# Verificar tu version
node -v
# Si es menor a v20.9, actualiza

v16Cambio Parallel routes requieren default.js

Si usas parallel routes (@folder), ahora es obligatorio tener un archivo default.tsx para evitar errores 404 en navegacion.

v16Cambio next/image cambios

El componente Image tiene cambios en las props por defecto. decoding ahora es "auto" en vez de "async".

Ver Optimizacion →

Eliminados

v16Eliminado next lint eliminado

Ya no viene incluido. Usa ESLint directamente con eslint . y configura tu propio setup. La idea es que uses la configuracion de ESLint que ya tienes sin depender de Next.js.

v16Eliminado AMP eliminado

El soporte para AMP se elimino completamente. Si lo usabas, migra a paginas HTML normales.

v16Eliminado Runtime config eliminado

serverRuntimeConfig y publicRuntimeConfig en next.config.js ya no existen. Usa variables de entorno (process.env) directamente.

v16Eliminado squoosh eliminado del image loader

Solo queda sharp como optimizador de imagenes. Si no lo tienes instalado:

npm install sharp

Migracion rapida

Si vienes de v15, estos son los pasos:

1. Actualiza Node.js a 20.9+
2. Actualiza Next.js: npm install next@16 react@19 react-dom@19
3. Instala sharp si no lo tienes: npm install sharp
4. Cambia params y searchParams a await en todas tus paginas dinamicas
5. Reemplaza unstable_cache por "use cache"
6. Si usas next lint, configura ESLint directamente
7. Si usas squoosh, cambia a sharp
8. Corre next dev y revisa que todo funcione

Estructura de esta documentacion

Esta documentacion de v16 esta simplificada comparada con v15. Cada seccion cubre lo esencial con ejemplos reales:

• Instalacion — Setup desde cero con Turbopack
• Routing — Rutas, layouts, dinamicas
• Rendering — Server y Client Components
• Data Fetching — use cache, Server Actions, caching avanzado
• Styling — Tailwind, CSS Modules
• Optimizacion — Imagenes, fonts, metadata
• API Routes — Route Handlers y middleware
• Deployment — Vercel, Docker, static export
• TypeScript — Tipado correcto en v16

Si necesitas la referencia completa, la documentacion de v15 sigue disponible.

Preguntas frecuentes

¿Puedo migrar de NextJS 15 a 16 de forma gradual?

Si. La mayoria de cambios son incrementales. Puedes actualizar las dependencias y luego ir corrigiendo los warnings de params async, reemplazar unstable_cache por "use cache" y adaptar las APIs eliminadas conforme aparezcan errores. Next.js 16 muestra warnings claros para lo que necesita cambiar.

¿Turbopack reemplaza a Webpack completamente?

En desarrollo si, Turbopack es el bundler por defecto con next dev. Para produccion (next build), todavia se usa Webpack. Si tienes algun plugin de Webpack que no funciona con Turbopack, puedes forzar Webpack en dev con next dev --webpack.

¿Que pasa si no migro de unstable_cache a use cache?

unstable_cache fue eliminado en v16. Si tu proyecto lo usa, va a fallar al hacer build. La migracion es directa: donde tenias unstable_cache(fn, keys, options), ahora pones "use cache" como primera linea de la funcion y configuras la revalidacion con cacheLife() y cacheTag().

¿NextJS 16 es compatible con React 18?

No. NextJS 16 requiere React 19. Al actualizar Next.js, necesitas actualizar React tambien: npm install next@16 react@19 react-dom@19. React 19 es retrocompatible con la mayoria del codigo de React 18, asi que la migracion suele ser transparente.

¿Necesito cambiar mi hosting o configuracion de deploy?

No. Si ya deployabas en Vercel, Netlify, Docker o cualquier otro servicio, el proceso es el mismo. Solo asegurate de que tu servidor tenga Node.js 20.9+ instalado y que tengas sharp como dependencia para la optimizacion de imagenes.