Featured image of post Nuevas funciones de Next.js 15 y guía de actualización: migrando tu proyectoFeatured image of post Nuevas funciones de Next.js 15 y guía de actualización: migrando tu proyecto

Nuevas funciones de Next.js 15 y guía de actualización: migrando tu proyecto

Next.js 15 se ha lanzado oficialmente, construido sobre React 19 estable. Esta actualización importante trae un sistema estable de Partial Prerendering (PPR), una estrategia de caché renovada e integración de Turbopack para compilaciones de desarrollo.

Este artículo explica las nuevas funciones clave y proporciona una guía de actualización paso a paso para migrar desde Next.js 14.

1. Nuevas funciones clave

Soporte nativo de React 19

Next.js 15 adopta completamente React 19. Los Server Components ahora son estables, y nuevos hooks como use() y useOptimistic() funcionan directamente dentro del App Router. Las Server Actions también son más eficientes con un rendimiento mejorado para hooks orientados a acciones.

Partial Prerendering (PPR) se vuelve estable

Anteriormente experimental, PPR ahora está listo para producción. Permite mezclar contenido dinámico y estático dentro de la misma página — los datos específicos del usuario se renderizan dinámicamente mientras que el contenido compartido se prerenderiza en tiempo de compilación. Este enfoque híbrido mejora directamente las métricas LCP y FCP para blogs y sitios de comercio electrónico.

Turbopack como motor de desarrollo predeterminado

Turbopack ahora es el empaquetador predeterminado para next dev en nuevos proyectos. Escrito en Rust, ofrece una sustitución de módulos en caliente (HMR) sustancialmente más rápida en comparación con el servidor de desarrollo legacy basado en webpack. Los proyectos a gran escala notarán la mejora de velocidad de inmediato.

2. Pasos de actualización

Paso 1: Actualizar dependencias

Ejecuta lo siguiente en la raíz de tu proyecto:

npm install next@15 react@19 react-dom@19

Paso 2: Reemplazar APIs obsoletas

Varias opciones de next.config.js de la versión 14 han cambiado. Presta especial atención a la configuración de caché — la opción staleTimes se ha extendido para un control de caché más granular.

Paso 3: Migrar al sistema de fuentes integrado

Si todavía usas el paquete @next/font, cambia al next/font integrado:

npm uninstall @next/font

Actualiza todas las importaciones en tu código para que referencien next/font.

3. Revisión de la estrategia de caché

En Next.js 15, el comportamiento de caché predeterminado para fetch ahora es no-store. Esto evita que datos obsoletos no deseados permanezcan en la caché. Si necesitas caché, pasa explícitamente cache: 'force-cache':

// Next.js 15 predeterminado: sin caché
const data = await fetch('https://api.example.com/data');

// Optar explícitamente por la caché
const cachedData = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

Resumen

Next.js 15 representa un salto significativo tanto en rendimiento como en experiencia de desarrollador, anclado por la integración de React 19. Con PPR estabilizado y Turbopack como motor de desarrollo predeterminado, la adopción en producción es más accesible que nunca. Presta atención a los nuevos valores predeterminados de caché y planifica tu migración en consecuencia.