BackVolver al blog

Next.js 15.3

Next.js 15.3 incluye Turbopack para builds, nuevos hooks de instrumentación de cliente y navegación, y más.

Next.js 15.3 incluye Turbopack para builds, nuevos hooks de instrumentación de cliente y navegación, y más:

Actualiza hoy mismo, o comienza con:

Terminal
# Usa la CLI de actualización automática
npx @next/codemod@canary upgrade latest
 
# ...o actualiza manualmente
npm install next@latest react@latest react-dom@latest
 
# ...o inicia un nuevo proyecto
npx create-next-app@latest

Builds con Turbopack (alpha)

Tras el lanzamiento estable de next dev --turbopack, más del 50% de las sesiones de desarrollo en Next.js 15 ahora usan Turbopack.

Esta versión incluye nuestro lanzamiento alpha de next build --turbopack, llevando las mismas mejoras de rendimiento del desarrollo local a los builds de producción.

Prueba Turbopack para builds de producción actualizando a 15.3 y ejecutando:

Terminal
next build --turbopack

Funcionalidad

99.3% de las pruebas de integración para next build ya pasan. Puedes seguir nuestro progreso hacia el 100% en areweturboyet.com. Si tu aplicación ya funciona con Turbopack para dev, entonces debería funcionar igual con build.

Los builds con Turbopack están en alpha. No recomendamos usarlos en producción para aplicaciones críticas en esta etapa. En su lugar, pruébalos en un entorno de previsualización o staging, o ejecuta el build localmente para observar diferencias en tamaño de bundle y rendimiento.

Estamos trabajando activamente para cerrar estas brechas de rendimiento mediante scope hoisting, mejor chunking y otras optimizaciones.

Rendimiento de builds

Hemos validado Turbopack en el gran monorepo interno de Vercel y en codebases tempranas de socios. Una ventaja de la arquitectura de Turbopack frente a nuestra implementación anterior con Webpack es que el rendimiento escala al añadir núcleos de CPU:

  • Con 4 núcleos: 28% más rápido que Webpack
  • Con 16 núcleos: 60% más rápido que Webpack
  • Con 30 núcleos: 83% más rápido que Webpack

Estos tiempos de build disminuyen aún más con nuestro trabajo experimental en caché persistente. Compartiremos más sobre esto en un futuro lanzamiento.

Ecosistema

Estamos trabajando con integraciones comunes como Sentry para asegurar su compatibilidad con next build --turbopack antes del lanzamiento estable. Contacta a @leerob en X si eres autor de herramientas y quieres colaborar para garantizar compatibilidad.

Feedback

Por favor comparte tu feedback, incluso si todo va bien, para ayudarnos a preparar un lanzamiento estable:

Configuración de Turbopack en next.config.ts (estable)

La configuración de Turbopack en next.config.ts ha pasado de experimental.turbo a la clave de primer nivel turbopack:

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

Por compatibilidad, la opción experimental.turbo seguirá siendo soportada hasta la próxima versión mayor de Next.js.

Para una lista completa de opciones de configuración de Turbopack, consulta la Referencia de API de Turbopack.

Soporte comunitario para Rspack (experimental)

El equipo de Rspack ha creado un plugin comunitario para Next.js.

Esto proporciona una opción para usuarios de Next.js que necesitan compatibilidad casi exacta con la API de Webpack, pero que aún no pueden migrar a Turbopack, para mejorar sus tiempos de compilación local y builds. Estamos seguros de nuestro progreso con Turbopack y seguiremos proporcionando un camino incremental para usuarios de Webpack.

Aunque no es un plugin oficial de Next.js, estamos colaborando con el equipo de Rspack. Ambos equipos trabajarán en fundamentos compartidos como SWC y Lightning CSS, beneficiando a todos los usuarios de Next.js y al ecosistema en general.

Si quieres explorar el uso de Rspack con Next.js, puedes usar el adaptador next-rspack. Estamos ejecutando el adaptador contra nuestra suite de pruebas de integración. Actualmente pasa ~96% de las pruebas.

Ver un ejemplo o aprender más en la documentación de Rspack.

Hook de Instrumentación de Cliente

El archivo instrumentation-client.js|ts permite añadir código de monitoreo y análisis que se ejecuta antes de que comience el código frontend de tu aplicación.

Es ideal para configurar seguimiento de rendimiento, monitoreo de errores u otras herramientas de observabilidad del lado del cliente lo antes posible en el ciclo de vida.

instrumentation-client.js
// Configurar monitoreo de rendimiento
performance.mark('app-init');
 
// Inicializar análisis
console.log('Analytics inicializados');
 
// Configurar seguimiento de errores
window.addEventListener('error', (event) => {
  // Enviar a tu servicio de seguimiento de errores
  reportError(event.error);
});

Coloca este archivo en la raíz de tu proyecto similar a la instrumentación del lado del servidor.

Aprende más en la documentación del archivo instrumentation-client.

Hooks de Navegación

Presentamos nuevos hooks de navegación que mejoran las capacidades de enrutamiento del lado del cliente en Next.js 15.3, permitiéndote desarrollar más fácilmente estados de carga localizados e implementar controles complejos como cancelación de navegación.

onNavigate

Este manejador de eventos es una nueva propiedad del componente Link y se ejecuta durante navegaciones del lado del cliente, dándote control preciso sobre el comportamiento de enrutamiento de tu aplicación.

A diferencia del evento onClick, que se dispara para todos los clics, onNavigate puede usarse para navegaciones de Single-Page App (SPA), permitiéndote ejecutar código o incluso cancelar la navegación con preventDefault().

Esta API puede usarse para implementar animaciones de transición, guards de navegación o seguimiento de análisis que solo deben ejecutarse durante transiciones reales de página.

Aprende más visitando la documentación de onNavigate.

useLinkStatus

El hook useLinkStatus para Client Components devuelve un booleano pending que indica cuando la navegación está en progreso, dándote control localizado sobre estados de carga.

Esta API está modelada según useFormStatus de React, y es útil para añadir indicadores de carga personalizados durante transiciones de página, especialmente cuando el prefetching está desactivado o cuando tus rutas enlazadas no tienen estados de carga dedicados.

Colocando un componente que use useLinkStatus como descendiente de tu componente <Link>, puedes crear elementos UI responsivos que reaccionen a eventos de navegación en tiempo real.

Aprende más visitando la documentación de useLinkStatus.

Mejoras de Rendimiento en el Plugin de TypeScript

El plugin de TypeScript para el servidor de lenguaje (LSP) de Next.js es ahora más rápido.

El LSP proporciona características de Intellisense en línea como validación de límites servidor/cliente, sugerencias de props de componentes, autocompletado de configuración y detección de errores para APIs no permitidas en React Server Components. En bases de código muy grandes, el plugin podía anteriormente hacer que el servicio de lenguaje de TypeScript se colgara o fallara.

Hemos hecho mejoras significativas de rendimiento para resolver estos problemas. En nuestras pruebas internas, los tiempos de respuesta del plugin han mejorado ~60% sin congelamientos o crashes.

Otros Cambios

  • [Feature] Soporte para new URL() en images.remotePatterns (#77692)
  • [Feature] Las opciones de viewport ahora están separadas de metadata (#77427)
  • [Feature] Añadir opción unstable_dynamicOnHover (#77866)
  • [Feature] Añadir soporte para Pinterest Rich Pins (#76988)
  • [Improvement] Hacer que revalidate funcione cuando es seguido por un redirect en Route Handlers (#77090)
  • [Improvement] Asegurar consistencia fuerte después de llamar a revalidate en Server Actions (#76885)
  • [Improvement] Actualizar sharp para conversión más rápida de PNG a AVIF (#77839)

Contribuidores

Next.js es el resultado del trabajo combinado de más de 3,000 desarrolladores individuales. Este lanzamiento fue posible gracias a:

Un enorme agradecimiento a @raunofreiberg, @huozhi, @ijjk, @timneutkens, @gaojude, @leerob, @mezotv, @bgw, @samcx, @ztanner, @sokra, @mischnic, @wbinnssmith, @kdy1, @unstubbable, @ahabhgk, @ScriptedAlchemy, @SukkaW, @wyattjoh, @eps1lon, @Amirroid, @Netail, @lubieowoce, @gnoff, @jackwilson323, @acdlite, @sbougerel, @kevva, @kasperpeulen, @Cy-Tek, @dvoytenko, @husseinraoouf, @isBatak, @iamkd, @delbaoliveira, @jantimon, @padmaia, @Bernardoow, @styfle, @devjiwonchoi, @JamBalaya56562, y @Marukome0743 por su ayuda!