Next.js 13.5

Next.js 13.5 mejora el rendimiento y confiabilidad en desarrollo local con:

• 22% más rápido en inicio del servidor local: Itera más rápido con el App & Pages Router
• 29% más rápido en HMR (Fast Refresh): Para iteraciones más rápidas al guardar cambios
• 40% menos uso de memoria: Medido al ejecutar next start
• Importaciones de paquetes optimizadas: Actualizaciones más rápidas al usar bibliotecas populares de iconos y componentes
• Mejoras en next/image: Soporte para <picture>, dirección artística y modo oscuro
• ¡Y más de 438 bugs corregidos!

Actualiza hoy y regístrate para Next.js Conf el 26 de octubre:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Mejoras en tiempo de inicio y Fast Refresh

Estamos emocionados de ver la adopción continua del App Router, que ahora crece un 80% mes a mes al analizar los 10 millones de orígenes principales rastreados por HTTP Archive.

Desde Next.js 13.4, nuestro enfoque ha sido mejorar el rendimiento y confiabilidad para aplicaciones con App Router. Comparando 13.4 con 13.5, hemos visto las siguientes mejoras en una nueva aplicación:

• 22% más rápido en inicio del servidor local
• 29% más rápido en HMR (Fast Refresh)
• 40% menos uso de memoria

Logramos este aumento de rendimiento mediante optimizaciones como:

• Reducir trabajo mediante caché o minimizando operaciones lentas
• Optimizar operaciones costosas del sistema de archivos
• Mejor recorrido incremental de árboles durante compilación
• Mover llamadas sincrónicas bloqueantes innecesarias para que sean lazy
• Configuración automática de bibliotecas grandes de iconos

El usuario de Next.js Lattice reportó entre 87-92% más rápido en compilación en sus pruebas.

Mientras continuamos iterando y mejorando nuestro rendimiento actual de bundler, también estamos trabajando en Turbopack (Beta) en paralelo para aumentar aún más el rendimiento. Con 13.5, next dev --turbo ahora soporta más características.

Importaciones de paquetes optimizadas

Hemos logrado un avance emocionante para optimizar importaciones de paquetes, mejorando tanto el rendimiento en desarrollo local como los cold starts en producción, al usar bibliotecas grandes de iconos o componentes u otras dependencias que re-exportan cientos o miles de módulos.

Anteriormente, añadimos soporte para modularizeImports, permitiéndote configurar cómo deben resolverse las importaciones al usar estas bibliotecas. En 13.5, hemos reemplazado esta opción con optimizePackageImports, que no requiere que especifiques el mapeo de importaciones, sino que automáticamente optimizará las importaciones por ti.

Bibliotecas como @mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react ,@heroicons/react , y lucide-react ahora están automáticamente optimizadas, cargando solo los módulos que realmente usas, mientras mantienes la conveniencia de escribir declaraciones import con múltiples exportaciones nombradas.

Ver el PR o aprender más sobre optimizePackageImports en nuestra documentación.

Mejoras en next/image

Basado en feedback de la comunidad, hemos añadido una nueva función experimental unstable_getImgProps() para soportar casos de uso avanzados sin usar directamente el componente <Image>, incluyendo:

• Trabajar con background-image o image-set
• Trabajar con canvas context.drawImage() o new Image()
• Trabajar con <picture> y media queries para implementar Dirección Artística o imágenes para Modo Claro/Oscuro

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...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>
  );
}

Además, la prop placeholder ahora soporta proporcionar data:image/ arbitraria para imágenes placeholder que no deben ser difuminadas (demo).

Aprende más sobre next/image en nuestra documentación.

Otras mejoras

Desde 13.4.0, hemos corregido más de 438 bugs y realizado varias mejoras incluyendo:

• [Docs] Nueva documentación sobre Formularios y Mutaciones
• [Docs] Nueva documentación sobre Componentes del Servidor y Componentes del Cliente
• [Docs] Nueva documentación sobre Política de Seguridad de Contenido y Nonces
• [Docs] Nueva documentación sobre Caché y Revalidación
• [Feature] useParams y useSearchParams de next/navigation ahora funcionan en Pages Router para adopción incremental
• [Feature] Soporte para scroll: false en router.push / router.replace
• [Feature] Soporte para scroll={false} en next/link
• [Feature] Soporte HTTPS para desarrollo: next dev --experimental-https
• [Feature] Añadido soporte para cookies().has() (Docs)
• [Feature] Añadido soporte para hostnames IPv6
• [Feature] Añadido soporte para Yarn PnP con App Router
• [Feature] Añadido soporte para redirect() en Server Actions
• [Feature] Añadido soporte para usar Bun al crear proyectos: bunx create-next-app (Docs)
• [Feature] Soporte para Draft Mode dentro de Middleware y Edge Runtime
• [Feature] cookies() y headers() ahora soportados dentro de Middleware
• [Feature] Metadata API ahora soporta summary_large_image en tarjetas de Twitter
• [Feature] RedirectType ahora exportado desde next/navigation
• [Feature] Añadido modo experimental de pruebas para Playwright (Docs)
• [Improvement] Refactorizado next start para manejar 1062% más requests/segundo
• [Improvement] Optimizado internos de Next.js para mejorar cold starts (hasta 40% más rápido, probado en Vercel)
• [Improvement] Mejor soporte para Jest con App Router (PR)
• [Improvement] Rediseñada salida de next dev (PR)
• [Improvement] Server Actions ahora funcionan con rutas completamente estáticas (incluyendo revalidación de datos con ISR)
• [Improvement] Server Actions ya no bloquean navegación entre rutas
• [Improvement] Server Actions ya no pueden disparar múltiples acciones concurrentes
• [Improvement] Server Actions que llaman redirect() ahora hacen push en el stack de historial en lugar de reemplazar la entrada actual para asegurar que el botón de retroceso funcione
• [Improvement] Server Actions añaden cabecera cache-control no-cache, no-store para prevenir caché del navegador
• [Improvement] Corregido bug donde Server Actions podían ser llamadas dos veces después de navegar
• [Improvement] Mejorado soporte para Emotion CSS con Server Components
• [Improvement] Soporte para scroll-behavior: smooth en cambios de URL con hash
• [Improvement] Añadido polyfill para Array.prototype.at en todos los navegadores
• [Improvement] Corregida condición de carrera en caché de next dev al manejar múltiples requests paralelos
• [Improvement] Salida de fetch en consola ahora muestra requests que omitieron caché con cache: SKIP
• [Improvement] usePathname ahora elimina correctamente basePath
• [Improvement] next/image ahora precarga imágenes correctamente en App Router
• [Improvement] not-found ya no renderiza el root layout dos veces
• [Improvement] NextRequest ahora puede clonarse (ej. new NextRequest(request))
• [Improvement] app/children/page.tsx ahora funciona correctamente para rutas literales /children
• [Improvement] Content Security Policy ahora soporta nonce para scripts preinicializados
• [Improvement] Usar redirect desde next/navigation ahora soporta basePath
• [Improvement] Corregido process.env no disponible durante renderizado en modo output: 'standalone'
• [Improvement] Mejorado mensaje de error al usar Static Export con características no soportadas
• [Improvement] Mejorada implementación de readdir recursivo (~3x más rápido)
• [Improvement] Corregido fallback: false con segmentos de ruta dinámicos que causaban requests colgados
• [Improvement] Corregido error donde signal se pasaba a requests de revalidación, causando fallos cuando el request ya estaba abortado
• [Improvement] Eliminado polling de fetch en página 404 en favor de eventos websocket, previniendo recargas innecesarias al ejecutar next dev
• [Improvement] performance.measure ya no puede causar mismatch de hidratación
• [Improvement] Corregidos casos donde podía ocurrir una recarga completa inesperada al editar pages/_app
• [Improvement] ImageResponse ahora extiende Response para mejor tipado (PR)
• [Improvement] pages ya no se muestra cuando no hay output pages en next build
• [Improvement] Corregido skipTrailingSlashRedirect siendo ignorado en <Link>
• [Improvement] Corregidas rutas de metadata dinámica duplicadas en modo dev

Contribuidores

Next.js es el resultado del trabajo combinado de más de 2,800 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.

Este lanzamiento 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, Justin, Leah, Maia, OJ, Tobias, y Will.

Y las contribuciones de: @opnay, @vinaykulk621, @goguda, @coreyleelarson, @bencmbrook, @cramforce, @williamli, @stefanprobst, @feugy, @Kikobeats, @dvoytenko, @MaxLeiter, @devjiwonchoi, @lacymorrow, @kylemcd, @tibi1220, @iamarpitpatidar, @pythagoras-yamamoto, @alexkirsz, @jsteele-stripe, @tknickman, @gaojude, @janicklas-ralph, @ericfennis, @JohnAdib, @MiLk, @delbaoliveira, @leerob, @LuudJanssen, @lucasconstantino, @davecarlson, @colinhacks, @jantimon, @Banbarashik, @ForsakenHarmony, @arturbien, @gnoff, @hsrvms, @DuCanhGH, @tim-hanssen, @Aryan9592, @rishabhpoddar, @Lantianyou, @joulev, @AkifumiSato, @trigaten, @HurSungYun, @DevLab2425, @SukkaW, @daniel-web-developer, @ky1ejs, @wyattjoh, @ShaunFerris, @syedtaqi95, @Heidar-An, @Jeffrey-Zutt, @Ryan-Dia, @steppefox, @hiro0218, @rjsdnql123, @fgiuliani, @steven-tey, @AntoineBourin, @adamrhunter, @darshanjain-entrepreneur, @s0h311, @djreillo, @dijonmusters, @cassidoo, @anonrig, @gfgabrielfranca, @Bitbbot, @BrennanColberg, @Nick-Mazuk, @thomasballinger, @lucgagan, @nroland013, @SonMooSans, @jenewland1999, @thorwebdev, @jyunhanlin, @Gnadhi, @yagogmaisp, @carlos-menezes, @ryo-manba, @vamcs, @matepapp, @SleeplessOne1917, @ecklf, @karlhorky, @starunaway, @FernandVEYRIER, @Terro216, @anthonyshew, @suhaotian, @simonswiss, @feikerwu, @lubakravche, @masnormen, @bottxiang, @mhmdrioaf, @tyler-lutz, @vincenthongzy, @yigithanyucedag, @doinki, @danger-ahead, @bre30kra69cs, @Yash-Singh1, @krmeda, @bigyanse, @2-NOW, @Mingyu-Song, @morganfeeney, @aralroca, @nickmccurdy, @adamjmcgrath, @angel1254mc, @cxa, @ibash, @mohanraj-r, @kevinmitch14, @iaurg, @steebchen, @Cow258, @charlesbdudley, @tyhopp, @Drblessing, @milovangudelj, @jacobsfletch, @JoshuaKGoldberg, @zignis, @ChristianIvicevic, @mrxbox98, @oliviertassinari, @fsansalvadore, @tvthatsme, @dvakatsiienko, @brunoeduardodev, @sonam-serchan, @vicsantizo, @leodr, @wiscaksono, @hustLer2k, @joshuabaker, @shozibabbas, @omarhoumz, @jamespearson, @tristndev, @AldeonMoriak, @manovotny, @mirismaili, @SuttonJack, @jeremydouglas, @JanCizmar, @mltsy, @WilderDev, @Guilleo03, @Willem-Jaap, @escwxyz, @wiredacorn, @Ethan-Arrowood, @BaffinLee, @greatSumini, @ciruz, @kijikunnn, @DustinsCode, @riqwan, @joostdecock, @nikolovlazar, @Bowens20832, @JohnAlbin, @gidgudgod, @maxproske, @dunklesToast, @yyuemii, @mPaella, @mknichel, @niko20, @mkcy3, @valentinpolitov, @smaeda-ks, @keyz, @Schniz, @koba04, @jiwooIncludeJeong, @ethanmick, @didemkkaslan, @itsmingjie, @v1k1, @thepatrick00, @taylorbryant, @kvnang, @alainkaiser, @simPod, @svarunid, @pauek, @lycuid, @MarkAtOmniux, @darshkpatel, @johnta0, @devagrawal09, @ibrahemid, @JesseKoldewijn, @javivelasco, @05lazy, @alexanderbluhm, @Fonger, @souporserious, @DevEsteves, @sanjaiyan-dev, @g12i, @cesarkohl, @josh, @li-jia-nan, @gabschne, @akd-io, @runjuu, @jocarrd, @nnnnoel, @ferdingler, y @ikryvorotenko