BackVolver al blog

Next.js 15 RC

La versión candidata (RC) de Next.js 15 ya está disponible. Esta versión preliminar te permite probar las últimas características antes del lanzamiento estable.

La versión candidata (RC) de Next.js 15 ya está disponible. Esta versión preliminar te permite probar las últimas características antes del lanzamiento estable.

  • React: Compatibilidad con React 19 RC, React Compiler (Experimental) y mejoras en errores de hidratación
  • Caché: Las solicitudes fetch, los Route Handlers GET y las navegaciones del cliente ya no se almacenan en caché por defecto
  • Prerenderizado parcial (Experimental): Nueva opción de configuración para Layout y Page para adopción incremental
  • next/after (Experimental): Nueva API para ejecutar código después de que una respuesta haya terminado de transmitirse
  • create-next-app: Diseño actualizado y nueva bandera para habilitar Turbopack en desarrollo local
  • Paquetes externos (Estable): Nuevas opciones de configuración para App y Pages Router

Prueba la RC de Next.js 15 hoy:

Terminal
npm install next@rc react@rc react-dom@rc

React 19 RC

El App Router de Next.js está construido sobre el canal canario de React para frameworks, lo que ha permitido a los desarrolladores usar y proporcionar feedback sobre estas nuevas APIs de React antes del lanzamiento de la versión 19.

Next.js 15 RC ahora es compatible con React 19 RC, que incluye nuevas características tanto para el cliente como para el servidor, como Actions.

Lee la guía de actualización de Next.js 15, la guía de actualización de React 19 y mira la conferencia React Conf Keynote para aprender más.

Nota: Algunas bibliotecas de terceros pueden no ser compatibles con React 19 todavía.

React Compiler (Experimental)

El React Compiler es un nuevo compilador experimental creado por el equipo de React en Meta. El compilador entiende tu código a un nivel profundo a través de su comprensión de la semántica de JavaScript puro y las Reglas de React, lo que le permite agregar optimizaciones automáticas a tu código. El compilador reduce la cantidad de memorización manual que los desarrolladores tienen que hacer a través de APIs como useMemo y useCallback, haciendo que el código sea más simple, fácil de mantener y menos propenso a errores.

Con Next.js 15, hemos agregado soporte para el React Compiler.

Instala babel-plugin-react-compiler:

Terminal
npm install babel-plugin-react-compiler

Luego, agrega la opción experimental.reactCompiler en next.config.js:

next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

Opcionalmente, puedes configurar el compilador para que se ejecute en modo "opt-in" de la siguiente manera:

next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

Nota: El React Compiler actualmente solo se puede usar en Next.js a través de un plugin de Babel, lo que podría resultar en tiempos de compilación más lentos.

Aprende más sobre el React Compiler y las opciones de configuración disponibles en Next.js.

Mejoras en errores de hidratación

Next.js 14.1 introdujo mejoras en los mensajes de error y errores de hidratación. Next.js 15 continúa construyendo sobre esto agregando una vista mejorada de errores de hidratación. Los errores de hidratación ahora muestran el código fuente del error con sugerencias sobre cómo abordar el problema.

Por ejemplo, este era un mensaje de error de hidratación anterior en Next.js 14.1:

Mensaje de error de hidratación en Next.js 14.1

Next.js 15 RC ha mejorado esto a:

Mensaje de error de hidratación mejorado en Next.js 15 RC

Actualizaciones de caché

El App Router de Next.js se lanzó con valores predeterminados de caché opinados. Estos fueron diseñados para proporcionar la opción más performante por defecto con la capacidad de optar por no usarlos cuando fuera necesario.

Basándonos en tu feedback, reevaluamos nuestros heurísticos de caché y cómo interactuarían con proyectos como Prerenderizado Parcial (PPR) y con bibliotecas de terceros que usan fetch.

Con Next.js 15, estamos cambiando el valor predeterminado de caché para solicitudes fetch, Route Handlers GET y Client Router Cache de "almacenado en caché por defecto" a "no almacenado en caché por defecto". Si deseas mantener el comportamiento anterior, puedes optar por seguir usando el almacenamiento en caché.

Continuaremos mejorando el almacenamiento en caché en Next.js en los próximos meses y compartiremos más detalles en el anuncio de Next.js 15 GA.

Las solicitudes fetch ya no se almacenan en caché por defecto

Next.js usa la opción de caché de la API Web fetch para configurar cómo una solicitud fetch del lado del servidor interactúa con la caché HTTP persistente del framework:

fetch('https://...', { cache: 'force-cache' | 'no-store' });
  • no-store - obtiene un recurso de un servidor remoto en cada solicitud y no actualiza la caché
  • force-cache - obtiene un recurso de la caché (si existe) o de un servidor remoto y actualiza la caché

En Next.js 14, force-cache se usaba por defecto si no se proporcionaba una opción cache, a menos que se usara una función dinámica o una opción de configuración dinámica.

En Next.js 15, no-store se usa por defecto si no se proporciona una opción cache. Esto significa que las solicitudes fetch no se almacenarán en caché por defecto.

Aún puedes optar por almacenar en caché las solicitudes fetch mediante:

  • Establecer la opción cache en force-cache en una sola llamada fetch
  • Establecer la opción de configuración de ruta dynamic en 'force-static' para una sola ruta
  • Establecer la opción de configuración de ruta fetchCache en 'default-cache' para anular todas las solicitudes fetch en un Layout o Page y usar force-cache a menos que especifiquen explícitamente su propia opción cache

Los Route Handlers GET ya no se almacenan en caché por defecto

En Next.js 14, los Route Handlers que usaban el método HTTP GET se almacenaban en caché por defecto a menos que usaran una función dinámica o una opción de configuración dinámica. En Next.js 15, las funciones GET no se almacenan en caché por defecto.

Aún puedes optar por el almacenamiento en caché usando una opción de configuración de ruta estática como export dynamic = 'force-static'.

Los Route Handlers especiales como sitemap.ts, opengraph-image.tsx e icon.tsx, y otros archivos de metadata siguen siendo estáticos por defecto a menos que usen funciones dinámicas u opciones de configuración dinámicas.

El Client Router Cache ya no almacena en caché los componentes de Página por defecto

En Next.js 14.2.0, introdujimos una bandera experimental staleTimes para permitir la configuración personalizada del Router Cache.

En Next.js 15, esta bandera sigue estando disponible, pero estamos cambiando el comportamiento predeterminado para que los segmentos de Página tengan un staleTime de 0. Esto significa que al navegar por su aplicación, el cliente siempre reflejará los datos más recientes del componente de Página que se active como parte de la navegación. Sin embargo, hay comportamientos importantes que no cambian:

  • Los datos de diseño compartidos no se volverán a obtener del servidor para seguir admitiendo el renderizado parcial (partial rendering).
  • La navegación hacia atrás/adelante seguirá restaurándose desde la caché para garantizar que el navegador pueda restaurar la posición de desplazamiento.
  • Loading.js permanecerá en caché durante 5 minutos (o el valor de la configuración staleTimes.static).

Puede optar por el comportamiento anterior del Client Router Cache configurando lo siguiente:

next.config.ts
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

Adopción incremental de Partial Prerendering (Experimental)

En Next.js 14, presentamos Partial Prerendering (PPR), una optimización que combina renderizado estático y dinámico en la misma página.

Actualmente, Next.js utiliza el renderizado estático por defecto a menos que use funciones dinámicas como cookies(), headers() y solicitudes de datos no almacenadas en caché. Estas APIs hacen que toda una ruta utilice el renderizado dinámico. Con PPR, puede envolver cualquier UI dinámica en un límite Suspense. Cuando llega una nueva solicitud, Next.js servirá inmediatamente un shell HTML estático y luego renderizará y transmitirá las partes dinámicas en la misma solicitud HTTP.

Para permitir una adopción incremental, hemos añadido una opción de configuración de ruta experimental_ppr para habilitar PPR en diseños y páginas específicos:

app/page.jsx
import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
	     <StaticComponent />
	     <Suspense fallback={...}>
		     <DynamicComponent />
	     </Suspense>
     </>
  };
}

Para usar esta nueva opción, debe configurar experimental.ppr en su archivo next.config.js como 'incremental':

next.config.ts
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

Una vez que todos los segmentos tengan PPR habilitado, se considerará seguro establecer el valor ppr en true y habilitarlo para toda la aplicación y todas las rutas futuras.

Compartiremos más sobre nuestra hoja de ruta de PPR en nuestra publicación de blog de Next.js 15 GA.

Más información sobre Partial Prerendering.

Ejecución de código después de una respuesta con next/after (Experimental)

Al procesar una solicitud de usuario, el servidor normalmente realiza tareas directamente relacionadas con el cálculo de la respuesta. Sin embargo, es posible que necesite realizar tareas como registro, análisis y sincronización con otros sistemas externos.

Dado que estas tareas no están directamente relacionadas con la respuesta, el usuario no debería tener que esperar a que se completen. Diferir el trabajo después de responder al usuario plantea un desafío porque las funciones serverless detienen el cálculo inmediatamente después de cerrar la respuesta.

after() es una nueva API experimental que resuelve este problema al permitirle programar trabajo para que se procese después de que la respuesta haya terminado de transmitirse, lo que permite que las tareas secundarias se ejecuten sin bloquear la respuesta principal.

Para usarla, agregue experimental.after a next.config.js:

next.config.ts
const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;

Luego, importe la función en Componentes de Servidor, Acciones de Servidor, Manejadores de Ruta o Middleware.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Tarea secundaria
  after(() => {
    log();
  });
 
  // Tarea principal
  return <>{children}</>;
}

Más información sobre next/after.

Actualizaciones de create-next-app

Para Next.js 15, hemos actualizado create-next-app con un nuevo diseño.

Nuevo diseño para create-next-app en Next.js 15 RC

Al ejecutar create-next-app, hay una nueva pregunta que le pregunta si desea habilitar Turbopack para desarrollo local (el valor predeterminado es No).

Terminal
✔ ¿Desea usar Turbopack para next dev? … No / Sí

La bandera --turbo se puede usar para habilitar Turbopack.

Terminal
npx create-next-app@rc --turbo

Para facilitar aún más el inicio de un nuevo proyecto, se ha añadido una nueva bandera --empty a la CLI. Esto eliminará cualquier archivo y estilo innecesario, lo que resultará en una página mínima de "hola mundo".

Terminal
npx create-next-app@rc --empty

Optimización del empaquetado de paquetes externos (Estable)

El empaquetado de paquetes externos puede mejorar el rendimiento de inicio en frío de su aplicación. En el App Router, los paquetes externos se empaquetan por defecto, y puede excluir paquetes específicos usando la nueva opción de configuración serverExternalPackages.

En el Pages Router, los paquetes externos no se empaquetan por defecto, pero puede proporcionar una lista de paquetes para empaquetar usando la opción existente transpilePackages. Con esta opción de configuración, debe especificar cada paquete.

Para unificar la configuración entre App Router y Pages Router, estamos introduciendo una nueva opción, bundlePagesRouterDependencies, para igualar el empaquetado automático predeterminado del App Router. Luego puede usar serverExternalPackages para excluir paquetes específicos, si es necesario.

next.config.ts
const nextConfig = {
  // Empaquetar automáticamente paquetes externos en el Pages Router:
  bundlePagesRouterDependencies: true,
  // Excluir paquetes específicos del empaquetado tanto para App como para Pages Router:
  serverExternalPackages: ['nombre-del-paquete'],
};
 
module.exports = nextConfig;

Más información sobre optimización de paquetes externos.

Otros cambios

  • [Cambio importante] La versión mínima de React ahora es 19 RC
  • [Cambio importante] next/image: Se eliminó squoosh en favor de sharp como dependencia opcional (PR)
  • [Cambio importante] next/image: Se cambió el valor predeterminado de Content-Disposition a attachment (PR)
  • [Cambio importante] next/image: Error cuando src tiene espacios iniciales o finales (PR)
  • [Cambio importante] Middleware: Aplicar condición react-server para limitar importaciones de API de react no recomendadas (PR)
  • [Cambio importante] next/font: Se eliminó el soporte para el paquete externo @next/font (PR)
  • [Cambio importante] next/font: Se eliminó el hash de font-family (PR)
  • [Cambio importante] Caché: force-dynamic ahora establecerá un valor predeterminado no-store para la caché de fetch (PR)
  • [Cambio importante] Configuración: Habilitar swcMinify (PR), missingSuspenseWithCSRBailout (PR) y outputFileTracing (PR) por defecto y eliminar opciones obsoletas
  • [Cambio importante] Eliminar la auto-instrumentación para Speed Insights (ahora debe usar el paquete dedicado @vercel/speed-insights) (PR)
  • [Cambio importante] Eliminar la extensión .xml para rutas dinámicas de sitemap y alinear URLs de sitemap entre desarrollo y producción (PR)
  • [Mejora] Metadatos: Actualización de las variables de entorno de respaldo para metadataBase cuando se aloja en Vercel (PR)
  • [Mejora] Corregir tree-shaking con importaciones mixtas de espacio de nombres y nombradas desde optimizePackageImports (PR)
  • [Mejora] Rutas paralelas: Proporcionar rutas catch-all no coincidentes con todos los parámetros conocidos (PR)
  • [Mejora] La configuración bundlePagesExternals ahora es estable y se renombró a bundlePagesRouterDependencies
  • [Mejora] La configuración serverComponentsExternalPackages ahora es estable y se renombró a serverExternalPackages
  • [Mejora] create-next-app: Los nuevos proyectos ignoran todos los archivos .env por defecto (PR)
  • [Documentación] Mejorar la documentación de autenticación (PR)
  • [Documentación] Paquete @next/env (PR)

Para más información, consulte la guía de actualización.

Colaboradores

Next.js es el resultado del trabajo combinado de más de 3,000 desarrolladores individuales, socios de la industria como Google y Meta, y nuestro equipo central en Vercel. Esta versión fue posible gracias a:

Un enorme agradecimiento a @devjiwonchoi, @ijjk, @Ethan-Arrowood, @sokra, @kenji-webdev, @wbinnssmith, @huozhi, @domdomegg, @samcx, @Jaaneek, @evanwinter, @wyattjoh, @kdy1, @balazsorban44, @feedthejim, @ztanner, @ForsakenHarmony, @kwonoj, @delbaoliveira, @stipsan, @leerob, @shuding, @xiaohanyu, @timneutkens, @dvoytenko, @bobaaaaa, @bgw, @gaspar09, @souporserious, @unflxw, @kiner-tang, @Ehren12, @EffectDoplera, @IAmKushagraSharma, @Auxdible, @sean-rallycry, @Jeffrey-Zutt, @eps1lon, @jeanmax1me, @unstubbable, @NilsJacobsen, @PaulAsjes, @adiguno, @ryan-nauman, @zsh77, @KagamiChan, @steveluscher, @MehfoozurRehman, @vkryachko, @chentsulin, @samijaber, @begalinsaf, @FluxCapacitor2, @lukahartwig, @brianshano, @pavelglac, @styfle, @symant233, @HristovCodes, @karlhorky, @jonluca, @jonathan-ingram, @mknichel, @sopranopillow, @Gomah, @imddc, @notrab, @gabrielrolfsen, @remorses, @AbhiShake1, @agadzik, @ryota-murakami, @rishabhpoddar, @rezamauliadi, @IncognitoTGT, @webtinax, @BunsDev, @nisabmohd, @z0n, @bennettdams, @joeshub, @n1ckoates, @srkirkland, @RiskyMH, @coopbri, @okoyecharles, @diogocapela, @dnhn, @typeofweb, @davidsa03, @imranolas, @lubieowoce, @maxhaomh, @mirasayon, @blvdmitry, @hwangstar156, @lforst, @emmerich, @christian-bromann, @Lsnsh, @datner, @hiro0218, @flybayer, @ianmacartney, @ypessoa, @ryohidaka, @icyJoseph, @Arinji2, @lovell, @nsams, @Nayeem-XTREME, @JamBalaya56562, @Arindam200, @gaojude, @qqww08, @todor0v, @coltonehrman y @wiesson por su ayuda.