Next.js 14.1

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

• Mejoras en Autoalojamiento: Nueva documentación y manejador de caché personalizado
• Mejoras en Turbopack: 5,600 pruebas pasadas para next dev --turbo
• Mejoras en DX: Mensajes de error mejorados, soporte para pushState y replaceState
• Rutas Paralelas e Interceptadas: 20 correcciones de bugs basadas en sus comentarios
• Mejoras en next/image: Soporte para <picture>, dirección artística y modo oscuro

Actualiza hoy o comienza con:

npx create-next-app@latest

Mejoras en Autoalojamiento

Hemos escuchado sus comentarios para mayor claridad sobre cómo autoalojar Next.js con un servidor Node.js, contenedor Docker o exportación estática. Hemos renovado nuestra documentación sobre:

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

Con Next.js 14.1, también hemos estabilizado el proveer manejadores de caché personalizados para Regeneración Estática Incremental y el Caché de Datos más granular para el App Router:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // deshabilita el caché en memoria predeterminado
};

Usar esta configuración al autoalojar es importante cuando se usan plataformas de orquestación de contenedores como Kubernetes, donde cada pod tendrá una copia del caché. Usar un manejador de caché personalizado le permitirá asegurar consistencia entre todos los pods que alojen su aplicación Next.js.

Por ejemplo, puede guardar los valores cacheados en cualquier lugar, como Redis o Memcached. Queremos agradecer a @neshca por su adaptador de manejador de caché Redis y ejemplo.

Mejoras en Turbopack

Seguimos enfocados en la confiabilidad y rendimiento del desarrollo local con Next.js:

• Confiabilidad: Turbopack pasa toda la suite de pruebas de desarrollo de Next.js y se usa internamente en aplicaciones de Vercel
• Rendimiento: Mejoras en tiempos de compilación inicial y Fast Refresh con Turbopack
• Uso de Memoria: Mejoras en el uso de memoria de Turbopack

Planeamos estabilizar next dev --turbo en una próxima versión manteniéndolo como opcional.

Confiabilidad

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

Hemos continuado usando next dev --turbo internamente en todas las aplicaciones Next.js de Vercel, incluyendo vercel.com y v0.dev. Todos los ingenieros trabajando en estas aplicaciones usan Turbopack diariamente.

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

Rendimiento

Para vercel.com, una aplicación grande de Next.js, hemos visto:

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

En v0.dev, identificamos una oportunidad para optimizar cómo se descubren y agrupan los Componentes Cliente de React en Turbopack - resultando en hasta 61.5% más rápido en tiempo de compilación inicial. Esta mejora también se observó en vercel.com.

Mejoras Futuras

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

Sin embargo, el caché actualmente no se preserva al reiniciar el servidor de desarrollo de Next.js. El próximo gran paso para el rendimiento de Turbopack es el caché en disco, que permitirá preservar el caché al reiniciar el servidor de desarrollo.

Mejoras en la Experiencia del Desarrollador

Mensajes de Error Mejorados y Fast Refresh

Sabemos lo críticos que son los mensajes de error claros para su experiencia de desarrollo local. Hemos hecho varias correcciones para mejorar la calidad de los stack traces y mensajes de error que ve al ejecutar next dev.

• Errores que antes mostraban mensajes del bundler 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 su editor, Fast Refresh no limpiaba la pantalla de error. 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:

Ejemplo de un error de una llamada fetch en Next.js 14.

Next.js 14.1 ha mejorado esto a:

Errores de llamadas fetch durante el renderizado ahora muestran el código fuente del error y el archivo afectado.

window.history.pushState y window.history.replaceState

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

Las llamadas a pushState y replaceState se integran con el App Router de Next.js, permitiéndole sincronizar con usePathname y useSearchParams.

Esto es útil cuando necesita actualizar inmediatamente la URL al guardar estado como filtros, ordenamiento u otra información que desee 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')}>Orden Ascendente</button>
      <button onClick={() => updateSorting('desc')}>Orden Descendente</button>
    </>
  );
}

Aprenda más sobre usar la API History nativa con Next.js.

Registro de la Caché de Datos

Para mejorar la observabilidad de tus datos en caché en tu aplicación Next.js al ejecutar next dev, hemos realizado varias mejoras a la opción de configuración logging configuración de registro.

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

GET / 200 en 48ms
 ✓ Compilado /fetch-cache en 117ms
 GET /fetch-cache 200 en 165ms
  │ GET https://api.vercel.app/products/1 200 en 14ms (cache: HIT)
 ✓ Compilado /fetch-no-store en 150ms
 GET /fetch-no-store 200 en 548ms
  │ GET https://api.vercel.app/products/1 200 en 345ms (cache: SKIP)
  │  │  Razón del fallo de caché: (cache: no-store)

Esto se puede habilitar mediante next.config.js:

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

Compatibilidad de next/image con <picture> y Dirección de Arte

El componente Image de Next.js ahora admite casos de uso más avanzados a través de getImageProps() (estable) que no requieren usar <Image> directamente. 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 Dirección de Arte o imágenes para 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.

En las últimas dos versiones, nos hemos enfocado en mejorar el rendimiento y la confiabilidad de Next.js. Ahora hemos podido hacer muchas mejoras a las Rutas Paralelas y Rutas Interceptadas basadas en tus comentarios. En particular, hemos añadido soporte para rutas catch-all y Acciones de Servidor.

• 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 usarse para implementar patrones de enrutamiento complejos.
• 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, superponiendo el feed. En este caso, Next.js intercepta la ruta /photo/123, enmascara la URL y la superpone sobre /feed.

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

Otras Mejoras

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

También hemos publicado recientemente videos explicando el almacenamiento en caché y algunos errores comunes con el Enrutador de Aplicación que pueden ser útiles.

• [Docs] Nueva documentación sobre Redireccionamiento
• [Docs] Nueva documentación sobre Pruebas
• [Docs] Nueva documentación con una Lista de Verificación para Producción
• [Feature] Añadido componente <GoogleAnalytics /> a next/third-parties (Docs)
• [Improvement] create-next-app ahora es más pequeño y rápido de instalar (PR)
• [Improvement] Las rutas anidadas que generan errores aún pueden ser capturadas por global-error (PR)
• [Improvement] redirect ahora respeta basePath cuando se usa en una acción de servidor (PR)
• [Improvement] Corrección de next/script y uso de beforeInteractive con el Enrutador de Aplicación (PR)
• [Improvement] Transpilación automática de @aws-sdk y lodash para un inicio más rápido de rutas (PR)
• [Improvement] Corrección del destello de contenido sin estilo con next dev y next/font (PR)
• [Improvement] Propagación de errores notFound más allá del límite de error de un segmento (PR)
• [Improvement] Corrección del servicio de archivos públicos desde dominios de localización con el Enrutador de Páginas i18n (PR)
• [Improvement] Error si se pasa un valor de revalidate inválido (PR)
• [Improvement] Corrección de problemas de ruta en máquinas Linux cuando la compilación se crea en Windows (PR)
• [Improvement] Corrección de Fast Refresh / HMR al usar una aplicación multi-zona con basePath (PR)
• [Improvement] Mejora en el apagado controlado ante señales de terminación (PR)
• [Improvement] Rutas modales en conflicto al interceptar desde diferentes rutas (PR)
• [Improvement] Corrección de rutas interceptadas al usar configuración basePath (PR)
• [Improvement] Mostrar advertencia cuando un slot paralelo faltante resulta en 404 (PR)
• [Improvement] Mejora en rutas interceptadas cuando se usan con rutas catch-all (PR)
• [Improvement] Mejora en rutas interceptadas cuando se usan con revalidatePath (PR)
• [Improvement] Corrección del uso de slots @children con rutas paralelas (PR)
• [Improvement] Corrección de TypeError al usar parámetros con rutas paralelas (PR)
• [Improvement] Corrección de la normalización de rutas catch-all para rutas paralelas predeterminadas (PR)
• [Improvement] Corrección de la visualización de rutas paralelas en el resumen de next build (PR)
• [Improvement] Corrección para parámetros de ruta al usar rutas interceptadas (PR)
• [Improvement] Mejora en rutas paralelas/interceptadas profundamente anidadas (PR)
• [Improvement] Corrección de 404 con rutas interceptadas junto con grupos de rutas (PR)
• [Improvement] Corrección de rutas paralelas con acciones de servidor / revalidación de caché de enrutador (PR)
• [Improvement] Corrección del uso de rewrites con una ruta interceptada (PR)
• [Improvement] Las Acciones de Servidor ahora funcionan desde bibliotecas de terceros (PR)
• [Improvement] Next.js ahora se puede usar dentro de un paquete ESM (PR)
• [Improvement] Optimizaciones de archivos barrel para bibliotecas como Material UI (PR)
• [Improvement] Las compilaciones ahora fallarán en uso incorrecto de useSearchParams sin Suspense (PR)

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. Únete a la comunidad en GitHub Discussions, Reddit, y Discord.

Esta versión fue posible gracias a:

• 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, y @moka-ayumu.