BackVolver al blog

Next.js 15.2

La versión 15.2 de Next.js incluye actualizaciones para depuración de errores, metadatos, Turbopack y más.

Next.js 15.2 incluye actualizaciones para depuración de errores, metadatos, Turbopack 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

Interfaz de errores rediseñada y trazas de pila mejoradas

Hemos realizado mejoras tanto visuales como de calidad en los errores que puedas encontrar al construir tu aplicación. Veamos cada área de mejora:

Superposición de errores

Ejemplo de la superposición de errores de Next.js después de la versión 15.2

Hemos renovado por completo la interfaz y presentación de los mensajes de error en Next.js, haciéndolos más fáciles de entender. El nuevo diseño resalta los detalles clave del error—como el mensaje, el fragmento de código relevante y la traza de llamadas—mientras reduce el ruido de código en bibliotecas o dependencias. Esto significa que puedes llegar más rápido a la raíz del problema y comenzar a solucionarlo.

Aprovechando la nueva función owner stacks de React, ahora podemos proporcionar mayor fidelidad sobre el origen de tus errores. Next.js ahora podrá mostrar el subcomponente responsable de lanzar el error, omitiendo elementos intermedios que no fueron responsables de crear el elemento que causó el error.

También facilitamos la personalización de tus preferencias de indicadores sin necesidad de añadir configuración adicional.

Ejemplo de las preferencias en las herramientas de desarrollo de Next.js

Hemos añadido una sección de retroalimentación al final de las superposiciones de error que te permite calificar qué tan útil fue el mensaje de error. Tu opinión nos ayuda a entender los puntos de dolor comunes y mejorar los mensajes de error para facilitar la depuración.

Indicador de desarrollo

Los distintos estados del indicador de desarrollo, desde el renderizado hasta mostrar información adicional.

Hemos consolidado la información de desarrollo en un nuevo indicador simplificado que muestra detalles como el modo de renderizado y el estado de compilación.

Durante la compilación, notarás un logo de Next.js atenuado y animado al navegar entre rutas. El logo se ilumina una vez que la compilación está completa y React comienza a renderizar, proporcionando una señal visual del estado de tu aplicación.

Al abrir el indicador de desarrollo ahora se muestra:

  • El modo de renderizado de tu ruta actual (estático/dinámico)
  • Estado de compilación de Turbopack
  • Errores activos con acceso rápido a la superposición de errores

Futuras actualizaciones expandirán este menú para incluir:

  • Herramientas de depuración para PPR (Partial Prerendering)
  • Funciones de monitoreo de caché
  • Herramientas adicionales para desarrolladores

Este enfoque unificado coloca toda la información crucial de desarrollo en un solo lugar accesible. Continuaremos refinando y expandiendo esta función en futuras versiones basándonos en tu retroalimentación.

Metadatos en streaming

A menudo es necesario obtener datos dinámicos, o realizar alguna operación asíncrona, en generateMetadata. En versiones anteriores de Next.js, estos metadatos necesitaban terminar de generarse antes de que la interfaz inicial fuera enviada para poder incluirse en el <head> del documento.

Esto significaba que para muchas páginas donde una interfaz inicial rápida estaba disponible, la primera representación visual aún se retrasaba por requisitos de datos que no afectaban lo que el usuario vería visualmente. Hemos mejorado esto en la versión 15.2 permitiendo que la interfaz inicial sea enviada al navegador incluso antes de que generateMetadata haya completado.

Ejemplo de las preferencias en las herramientas de desarrollo de Next.js

Sin embargo, para mantener compatibilidad con bots y rastreadores que esperan que los metadatos estén disponibles en el <head> del documento, continuamos retrasando el envío de HTML a ciertos agentes de usuario de bots. Si necesitas un control más granular sobre qué bots reciben este tratamiento, puedes personalizar la expresión regular utilizada para servirlos mediante la opción htmlLimitedBots en next.config.js.

Aprende más sobre metadatos en streaming.

Mejoras de rendimiento en Turbopack

Turbopack fue marcado como estable con Next.js 15.

Hemos estado trabajando en mejorar el rendimiento de Turbopack, particularmente en escenarios sin caché persistente. Como parte de este lanzamiento, hemos introducido las siguientes mejoras:

  • Tiempos de compilación más rápidos: Los primeros adoptantes han reportado hasta 57.6% más rápido en tiempos de compilación al acceder a rutas comparado con Next.js 15.1.
  • Menor uso de memoria: Para la aplicación vercel.com, observamos una disminución del 30% en el uso de memoria durante el desarrollo local.

Con estas mejoras, Turbopack debería ser ahora más rápido que Webpack en prácticamente todos los casos. Si encuentras un escenario donde esto no sea cierto para tu aplicación, por favor háznoslo saber—queremos investigar estos casos.

También hemos progresado en el caché persistente y las compilaciones de producción. Aunque estas características aún no están listas para un lanzamiento experimental, hemos comenzado a probarlas en proyectos reales. Compartiremos métricas más detalladas una vez que estén disponibles para un uso más amplio.

Transiciones de vista en React (experimental)

Hemos añadido una bandera de función para habilitar la nueva API experimental de View Transitions en React. Esta nueva API te permite animar entre diferentes vistas y componentes en tu aplicación.

Para habilitar esta función, añade lo siguiente a tu next.config.js:

next.config.js
module.exports = {
  experimental: {
    viewTransition: true,
  },
};

Nota: Esta característica es altamente experimental y puede cambiar en futuras versiones.

Para más información sobre cómo usar esta función, consulta el pull request original de View Transition en el repositorio de React. Este trabajo se basa en la implementación nativa del navegador de View Transitions.

Publicaremos más documentación y ejemplos a medida que avance la estabilidad.

Middleware para Node.js (experimental)

Hemos estado trabajando en una nueva bandera experimental para permitir el uso del runtime de Node.js en el Middleware de Next.js.

Para habilitar esta función, añade lo siguiente a tu next.config.js:

next.config.js
module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

Luego puedes especificar el runtime de Node.js en la exportación config de tu Middleware:

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Clave API pre-hasheada en env
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Prohibido', { status: 403 });
  }
 
  console.log('Clave API validada');
}
 
export const config = {
  runtime: 'nodejs',
};

Nota: Esta característica aún no se recomienda para uso en producción. Por lo tanto, Next.js lanzará un error a menos que estés usando la versión next@canary en lugar de la versión estable.

Estamos planeando aprovechar esta oportunidad para mejorar y remodelar la API de Middleware. Si tienes alguna sugerencia o solicitud, háznoslo saber. El Middleware para Node.js fue una de las principales solicitudes de la comunidad y estamos emocionados de haber abordado esto.

Próximamente

  • "use cache" (beta): Hemos estado trabajando en estabilizar "use cache" como una función independiente. Mantente atento para más detalles en los próximos lanzamientos. Aprende más sobre "use cache".
  • Caché persistente en Turbopack (experimental): Hemos estado probando internamente el caché persistente en Vercel con mejoras positivas en el rendimiento. Una vez que lo estabilicemos más, lo lanzaremos detrás de una bandera de función para obtener retroalimentación y pruebas adicionales.

Otros cambios

  • [Función] Añadir bandera --api para crear una API sin interfaz con create-next-app (PR)
  • [Función] Añadir soporte para images.qualities con next/image (PR)
  • [Deprecación] Advertir sobre la deprecación de configuración i18n en App Router (PR)
  • [Mejora] Mejorar rendimiento del lint para no-html-link-for-pages (PR)
  • [Mejora] Emitir error de compilación si la directiva "use action" se usa incorrectamente (PR)
  • [Mejora] Mostrar global-error junto con la superposición de desarrollo durante el desarrollo (PR)
  • [Mejora] Permitir desactivar logs de solicitudes HTTP en el servidor de desarrollo (PR)
  • [Mejora] Añadir etiquetas SEO de paginación (PR)
  • [Mejora] Mejorar JSDocs para metadata y componentes <Link> (PR)
  • [Mejora] Middleware debería coincidir con solicitudes next/image (PR)
  • [Mejora] Añadir nombre de host al mensaje predeterminado del límite de error (PR)
  • [Mejora] Enviar errores no manejados por límites de error explícitos a través de reportError (PR)

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 @mischnic, @Marukome0743, @JamBalaya56562, @creationix, @noreiller, @styfle, @abdonrd, @ollyw, @aymericzip, @davidhu2000, @attilarepka, @devpla, @dydals3440, @huozhi, @wbinnssmith, @suu3, @PapatMayuri, @Sahil4883, @abyii, @molebox, @sokra, @maciej-ka, @abvthecity, @damiensedgwick, @alitas, @RiskyMH, @ytreister, @sommeeeer, @n1ckoates, @yongholeeme, @spidersouris, @gurkerl83, @cassiossantos, @Netail, @tknickman, @eur00t, @cseas, @nnnnoel, @Manoj-M-S, @lfades, @matmannion, @mikeboensel, @nphmuller, @apostolos, @k15a, @pavelee, @locothedev, @vexcat, @Zach-Jaensch, @decepulis, @gadcam, @lukahartwig, @jsanford8, @RobinMalfait, @raunofreiberg, @mohsen1, @skushagra, @amannn, @HQidea, @jrandolf, @smit-err, @littledivy, @k35o, @martinsione, @CvX, @msereniti, @Timer, @Iftee97, @chibicode, @RobPruzan, @PlagueFPS, @bjunix, @maximevtush, @michaelven, @sedlukha, @johannpinson, @AxelUser, @Nayeem-XTREME, @IcaroG, @blurrah, @lachlanjc, @ashi009, @conico974, @raphaelcosta, @dulmandakh, @khuezy, @Knoa0405, @wangsijie, @stefanprobst, @wentsul, @loopy-lim, @bratvanov, @hedgeday, y @cassian-goode por su ayuda!