Next.js 14.1

Traducido de la entrada de Jiachi Lui y Jimmy Lai en el blog de Next.js.

Next.js 14.1 incluye mejoras en la experiencia del desarrollador, incluyendo:

• Mejoras en el Self-Hosting: Nueva documentación y gestor de caché personalizado
• Mejoras en Turbopack: 5,600 pruebas pasadas para next dev —turbo
• Mejoras en la experiencia de desarrollo (DX): Mejora en los mensajes de error, soporte para pushState y replaceState
• Rutas paralelas e interceptadas: 20 correcciones de errores basadas en muchos comentarios
• Mejoras en paquete next/image: <picture>, dirección de arte y soporte para modo oscuro

Actualízate hoy o comienza con:

npx create-next-app@latest

Mejoras en el Self-Hosting

Hemos escuchado sus comentarios para mejorar la claridad sobre cómo hacer self-hosting de Next.js con un servidor Node.js, un contenedor Docker o una exportación estática. Hemos renovado nuestra documentación sobre autohospedaje en:

• Variables de entorno en tiempo de ejecución
• Configuración de caché personalizada para ISR
• Optimización personalizada de imágenes
• Middleware

Con Next.js 14.1, también hemos estabilizado la provisión de gestores de caché personalizados para la Regeneración Estática Incremental y la caché de datos más granular para el Router de la Aplicación:

module.exports = {
	cacheHandler: require.resolve("./cache-handler.js"),
	cacheMaxMemorySize: 0 // disable default in-memory caching
};

Utilizar esta configuración al autohospedar es importante cuando se utilizan plataformas de orquestación de contenedores como Kubernetes, donde cada pod tendrá una copia de la caché. El uso de un gestor de caché personalizado te permitirá garantizar la consistencia en todos los pods que alojan tu aplicación Next.js.

Por ejemplo, puedes guardar los valores en caché en cualquier lugar, como Redis o Memcached. Nos gustaría agradecer a @neshca por su adaptador y ejemplo de gestor de caché para Redis.

Mejoras en Turbopack

Continuamos enfocándonos en la confiabilidad y el rendimiento del desarrollo local de Next.js:

• Confiabilidad: Turbopack superando toda la suite de pruebas de desarrollo de Next.js y utilizando las aplicaciones de Vercel
• Rendimiento: Mejorando los tiempos de compilación inicial de Turbopack y los tiempos de actualización rápida
• Uso de memoria: Mejorando el uso de memoria de Turbopack

Planeamos estabilizar next dev --turbo en una próxima versión, aún siendo opcional.

Confiabilidad

Next.js con Turbopack ahora supera 5,600 pruebas de desarrollo (94%), 600 más desde la última actualización. Puedes seguir el progreso en areweturboyet.com.

Hemos continuado utilizando next dev —turbo en todas las aplicaciones Next.js de Vercel, incluyendo vercel.com y v0.dev. Todos los ingenieros que trabajan en estas aplicaciones utilizan Turbopack a diario.

Hemos encontrado y corregido varios problemas para aplicaciones muy grandes de Next.js que utilizan Turbopack. Para estas correcciones, hemos añadido nuevas pruebas a las suites de pruebas de desarrollo existentes en Next.js.

Rendimiento

Para vercel.com, una gran aplicación de Next.js, hemos observado:

• Hasta un 76.7% más rápido en el inicio del servidor local.
• Hasta un 96.3% más rápido en las actualizaciones de código con Fast Refresh.
• Hasta un 45.8% más rápido en la compilación inicial de rutas sin caché (Turbopack aún no tiene caché en disco).

En v0.dev, identificamos una oportunidad para optimizar la forma en que los Componentes Clientes de React se descubren y empaquetan en Turbopack, lo que resultó en hasta un 61.5% más rápido en el tiempo de compilación inicial. Esta mejora de rendimiento también se observó en vercel.com.

Mejoras futuras

Turbopack actualmente tiene una caché en memoria, lo que mejora los tiempos de compilación incremental para Fast Refresh.

Sin embargo, la caché actualmente no se conserva al reiniciar el servidor de desarrollo de Next.js. El siguiente gran paso para el rendimiento de Turbopack es la caché en disco, lo que permitirá conservar la caché al reiniciar el servidor de desarrollo.

Mejoras en la Experiencia del Desarrollador

Mejoras en los Mensajes de Error y Fast Refresh

Sabemos lo críticos que son los mensajes de error claros para tu experiencia de desarrollo local. Hemos realizado una serie de correcciones para mejorar la calidad de las trazas de pila y los mensajes de error que ves al ejecutar next dev.

Los errores que antes mostraban errores del empaquetador como webpack-internal ahora muestran correctamente el código fuente del error y el archivo afectado. Después de ver un error en un componente cliente, y luego corregir el error en tu editor, el Fast Refresh no limpiaba la pantalla de error. Se requería una recarga dura. Hemos corregido varios de estos casos. Por ejemplo, al intentar exportar metadata desde un Componente Cliente.

Por ejemplo, este era un mensaje de error anterior:

Un ejemplo de un error de una llamada fetch en Next.js 14.

Next.js 14.1 ha mejorado esto a:

Los errores de las llamadas fetch durante la renderización ahora muestran el código fuente del error y el archivo afectado.

window.history.pushState y window.history.replaceState

El Router de la Aplicación ahora permite el uso de los métodos nativos pushState y replaceState para actualizar la pila de historial del navegador sin recargar la página.

Las llamadas pushState y replaceState se integran en el Router de la Aplicación de Next.js, lo que te permite sincronizarlas con usePathname y useSearchParams.

Esto es útil cuando se necesita actualizar inmediatamente la URL al guardar el estado, como filtros, orden de clasificación u otra información deseada para persistir entre recargas.

'use client';

import { useSearchParams } from 'next/navigation';

export default function SortProducts() {
  const searchParams = useSearchParams();

  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }

  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

Aprende más sobre cómo usar la API de Historial nativa con Next.js.

Registro de la Caché de Datos

Para una mejor observabilidad de sus datos en caché en tu aplicación Next.js al ejecutar next dev, hemos realizado varias mejoras en la opción de configuración de logging.

Ahora puedes mostrar si hubo un HIT o SKIP de caché y la URL completa solicitada:

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

Esto puede ser habilitado mediante next.config.js:

module.exports = {
	logging: {
		fetches: {
			fullUrl: true
		}
	}
};

Soporte de next/image para <picture> y Art Direction

El componente de imagen de Next.js ahora admite casos de uso más avanzados a través de getImageProps() (estable), que no requieren el uso directo de <Image>. Esto incluye:

• Trabajar con background-image o image-set
• Trabajar con context.drawImage() de canvas o new Image()
• Trabajar con consultas de medios <picture> para implementar Art Direction o imágenes de Modo Claro/Oscuro

import { getImageProps } from "next/image";

export default function Page() {
	const common = { alt: "Hero", width: 800, height: 400 };
	const {
		props: { srcSet: dark }
	} = getImageProps({ ...common, src: "/dark.png" });
	const {
		props: { srcSet: light, ...rest }
	} = getImageProps({ ...common, src: "/light.png" });

	return (
		<picture>
			<source media="(prefers-color-scheme: dark)" srcSet={dark} />
			<source media="(prefers-color-scheme: light)" srcSet={light} />
			<img {...rest} />
		</picture>
	);
}

Aprende más sobre getImageProps().

Rutas Paralelas e Interceptadas

En Next.js 14.1, hemos realizado 20 mejoras en las Rutas Paralelas e Interceptadas.

Durante los últimos dos lanzamientos, nos hemos enfocado en mejorar el rendimiento y la confiabilidad de Next.js. Ahora hemos podido hacer muchas mejoras en las Rutas Paralelas e Interceptadas basadas en sus comentarios. Especialmente, hemos añadido soporte para rutas catch-all (atrapa-todo) y Acciones del Servidor.

• Las Rutas Paralelas te permiten renderizar simultáneamente o condicionalmente una o más páginas en el mismo diseño. Para secciones altamente dinámicas de una aplicación, como paneles de control y feeds en sitios sociales, las Rutas Paralelas pueden utilizarse para implementar patrones de enrutamiento complejos.
• Las Rutas Interceptadas te permiten cargar una ruta desde otra parte de tu aplicación dentro del diseño actual. Por ejemplo, al hacer clic en una foto en un feed, puedes mostrar la foto en un modal, superponiéndola sobre el feed. En este caso, Next.js intercepta la ruta /photo/123, enmascara la URL y la superpone sobre /feed.

Aprende más sobre las Rutas Paralelas e Interceptadas o ve un ejemplo.

Otras Mejoras

Desde la versión 14.0, hemos corregido varios errores altamente votados por la comunidad.

También hemos publicado recientemente vídeos explicativos sobre el almacenamiento en caché y algunos errores comunes con el Router de la Aplicación que podrían resultarte útiles.

[Nueva Documentación] Nueva documentación sobre Redirecciones [Nueva Documentación] Nueva documentación sobre Pruebas [Nueva Documentación] Nueva documentación con una Lista de Verificación de Producción [Característica] Agregar el componente <GoogleAnalytics /> a next/third-parties (Documentación) [Mejora] create-next-app es ahora más pequeño y más rápido de instalar (Pull Request) [Mejora] Las rutas anidadas que lanzan errores aún pueden ser capturadas por global-error (Pull Request) [Mejora] redirect ahora respeta basePath cuando se usa en una acción del servidor (Pull Request) [Mejora] Corregir next/script y beforeInteractive para su uso con el Router de la Aplicación (Pull Request) [Mejora] Transpilar automáticamente @aws-sdk y lodash para un inicio de ruta más rápido (Pull Request) [Mejora] Corregir el flash de contenido sin estilo con next dev y next/font (Pull Request) [Mejora] Propagar errores notFound más allá de los límites de error de un segmento (Pull Request) [Mejora] Corregir el servicio de archivos públicos desde dominios locales con Pages Router i18n (Pull Request) [Mejora] Error si se pasa un valor de inválido de revalidate (Pull Request) [Mejora] Corregir problemas de ruta en máquinas Linux cuando la compilación se creó en Windows (Pull Request) [Mejora] Corregir Actualización Rápida / HMR cuando se usa una aplicación de varias zonas con basePath (Pull Request) [Mejora] Mejorar el “graceful shutdown” desde las señales de terminación (Pull Request) [Mejora] Las rutas de modal chocan cuando se interceptan desde diferentes rutas (Pull Request) [Mejora] Corregir rutas de interceptación al usar la configuración de basePath (Pull Request) [Mejora] Mostrar advertencia cuando falta una ranura paralela y resulta en un 404 (Pull Request) [Mejora] Mejorar las rutas interceptadas cuando se usan con rutas catch-all (Pull Request) [Mejora] Mejorar las rutas interceptadas cuando se usan con revalidatePath (Pull Request) [Mejora] Corregir el uso de ranuras @children con rutas paralelas (Pull Request) [Mejora] Corregir TypeError al usar parámetros con rutas paralelas (Pull Request) [Mejora] Corregir normalización de rutas catch-all para rutas paralelas predeterminadas (Pull Request) [Mejora] Corregir visualización de rutas paralelas en el resumen de la compilación next build (Pull Request) [Mejora] Corregir para los parámetros de ruta al usar rutas interceptadas (Pull Request) [Mejora] Mejorar las rutas paralelas/interceptadas profundamente anidadas (Pull Request) [Mejora] Corregir 404 con rutas interceptadas emparejadas con grupos de rutas (Pull Request) [Mejora] Corregir rutas paralelas con acciones del servidor / caché de router revalidante (Pull Request) [Mejora] Corregir el uso de rewrites con una ruta interceptada (Pull Request) [Mejora] Las Acciones del Servidor ahora funcionan desde bibliotecas de terceros (Pull Request) [Mejora] Next.js ahora se puede usar dentro de un paquete ESM (Pull Request) [Mejora] Optimizaciones de archivos de barril para bibliotecas como Material UI (Pull Request) [Mejora] Las compilaciones ahora fallarán en el uso incorrecto de useSearchParams sin Suspense (Pull Request)

Colaboradores

Next.js es el resultado del trabajo conjunto de más de 3,000 desarrolladores individuales, socios de la industria como Google y Meta, y nuestro equipo central en Vercel. Únete a la comunidad en las Discusiones de GitHub, Reddit y Discord.

Esta release ha sido traida por:

• El equipo de Next.js: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, y Zack.
• El equipo de Turbopack: Donny, Leah, Maia, OJ, Tobias, y Will.
• Documentación de Next.js: Delba, Steph, Michael, y Lee.

Y las contribuciones de: @OlehDutchenko, @eps1lon, @ebidel, @janicklas-ralph, @JohnPhamous, @chentsulin, @akawalsky, @BlankParticle, @dvoytenko, @smaeda-ks, @kenji-webdev, @rv-david, @icyJoseph, @dijonmusters, @A7med3bdulBaset, @jenewland1999, @mknichel, @kdy1, @housseindjirdeh, @max-programming, @redbmk, @SSakibHossain10, @jamesmillerburgess, @minaelee, @officialrajdeepsingh, @LorisSigrist, @yesl-kim, @StevenKamwaza, @manovotny, @mcexit, @remcohaszing, @ryo-manba, @TranquilMarmot, @vinaykulk621, @haritssr, @divquan, @IgorVaryvoda, @LukeSchlangen, @RiskyMH, @ash2048, @ManuWeb3, @msgadi, @dhayab, @ShahriarKh, @jvandenaardweg, @DestroyerXyz, @SwitchBladeAK, @ianmacartney, @justinh00k, @tiborsaas, @ArianHamdi, @li-jia-nan, @aramikuto, @jquinc30, @samcx, @Haosik, @AkifumiSato, @arnabsen, @nfroidure, @clbn, @siddtheone, @zbauman3, @anthonyshew, @alexfradiani, @CalebBarnes, @adk96r, @pacexy, @hichemfantar, @michaldudak, @redonkulus, @k-taro56, @mhughdo, @tknickman, @shumakmanohar, @vordgi, @hamirmahal, @gaspar09, @JCharante, @sjoerdvanBommel, @mass2527, @N-Ziermann, @tordans, @davidthorand, @rmathew8-gh, @chriskrogh, @shogunsea, @auipga, @SukkaW, @agustints, @OXXD, @clarencepenz, @better-salmon, @808vita, @coltonehrman, @tksst, @hugo-syn, @JakobJingleheimer, @Willem-Jaap, @brandonnorsworthy, @jaehunn, @jridgewell, @gtjamesa, @mugi-uno, @kentobento, @vivianyentran, @empflow, @samennis1, @mkcy3, @suhaotian, @imevanc, @d3lm, @amannn, @hallatore, @Dylan700, @mpsq, @mdio, @christianvuerings, @karlhorky, @simonhaenisch, @olci34, @zce, @LavaToaster, @rishabhpoddar, @jirihofman, @codercor, @devjiwonchoi, @JackieLi565, @thoushif, @pkellner, @jpfifer, @quisido, @tomfa, @raphaelbadia, @j9141997, @hongaar, @MadCcc, @luismulinari, @dumb-programmer, @nonoakij, @franky47, @robbertstevens, @bryndyment, @marcosmartini, @functino, @Anisi, @AdonisAgelis, @seangray-dev, @prkagrawal, @heloineto, @kn327, @ihommani, @MrNiceRicee, @falsepopsky, @thomasballinger, @tmilewski, @Vadman97, @dnhn, @RodrigoTomeES, @sadikkuzu, @gffuma, @Schniz, @joulev, @Athrun-Judah, @rasvanjaya21, @rashidul0405, @nguyenbry, @Mwimwii, @molebox, @mrr11k, @philwolstenholme, @IgorKowalczyk, @Zoe-Bot, @HanCiHu, @JackHowa, @goncy, @hirotomoyamada, @pveyes, @yeskunall, @ChendayUP, @hmaesta, @ajz003, @its-kunal, @joelhooks, @blurrah, @tariknh, @Vinlock, @Nayeem-XTREME, @aziyatali, @aspehler, and @moka-ayumu.