Como anunciamos en Next.js Conf, nuestra misión de crear la mejor experiencia para desarrolladores continúa con Next.js 11, que incluye:
- Conformidad: Un sistema que proporciona soluciones cuidadosamente diseñadas para soportar una UX óptima.
- Rendimiento mejorado: Más optimizaciones para mejorar el tiempo de arranque en frío y que puedas empezar a codificar más rápido.
next/script: Prioriza automáticamente la carga de scripts de terceros para mejorar el rendimiento.next/image: Reduce el desplazamiento de diseño (layout shift) y crea una experiencia visual más fluida con detección automática de tamaño y soporte para placeholders de desenfoque.- Webpack 5: Ahora activado por defecto para todas las aplicaciones Next.js, llevando estos beneficios a todos los desarrolladores.
- Migración desde Create React App (Experimental): Convierte automáticamente aplicaciones Create React App para que sean compatibles con Next.js.
- Next.js Live (Versión preliminar): Codifica en el navegador, con tu equipo, en tiempo real.
Actualiza hoy ejecutando npm i next@latest react@latest react-dom@latest y consulta la guía de migración más abajo.
Conformidad
Incluso con grandes herramientas y optimizaciones automáticas en los frameworks, a menudo se espera que los dueños de sitios y desarrolladores se conviertan en expertos en temas de calidad de UX, como rendimiento, seguridad y accesibilidad. A medida que se añaden características y los equipos escalan, los desarrolladores necesitan pensar diferente.
A través de su trabajo construyendo aplicaciones web a gran escala como Search y Maps, Google ha demostrado que los frameworks pueden jugar un papel crucial en mantener la calidad a medida que los equipos y aplicaciones escalan. Al aprovechar un sistema de valores predeterminados sólidos y salvaguardas, empoderan a los desarrolladores para enfocarse más en características y productos.
Hoy, el equipo de Plataformas Web de Google ha comenzado a abrir su sistema con Conformidad para Next.js.
Conformidad es un sistema que proporciona soluciones y reglas cuidadosamente diseñadas para soportar una carga óptima y Core Web Vitals, con futuras adiciones para soportar otros aspectos de calidad como seguridad y accesibilidad. Estas soluciones liberan a tu equipo de memorizar todas las últimas reglas para un rendimiento de carga óptimo, mientras aún te dan la flexibilidad de hacer las elecciones correctas para tus aplicaciones.
Junto con muchas optimizaciones fundamentales respaldadas por investigación de rendimiento, Next.js 11 ahora soporta ESLint listo para usar, haciendo más fácil detectar problemas específicos del framework durante el desarrollo y establecer pautas para tu equipo para asegurar mejores prácticas incluso al escalar.
Para comenzar con ESLint, ejecuta npx next lint después de actualizar a Next.js 11. La integración de ESLint funciona para aplicaciones Next.js nuevas y existentes, proporcionando un nuevo conjunto de reglas para ayudar a los desarrolladores a construir mejores aplicaciones.
Aprende más sobre Conformidad para frameworks en el blog de Google.
Rendimiento mejorado
Desde Next.js 10, hemos estado obsesionados con mejorar aún más la experiencia del desarrollador en Next.js. En las versiones 10.1 y 10.2 mejoramos el tiempo de inicio hasta en un 24% y redujimos otro 40% del tiempo de procesamiento para cambios a través de React Fast Refresh. Has estado obteniendo estas increíbles mejoras de velocidad simplemente manteniendo Next.js actualizado.
Next.js 11 incluye otra optimización a Babel para reducir aún más el tiempo de inicio. Hemos creado una implementación completamente nueva del cargador Babel para webpack, optimizando la carga y añadiendo una capa de caché de configuración en memoria. En la práctica, esto significa ningún cambio para los desarrolladores pero resultará en una experiencia de desarrollo más rápida.
Optimización de Scripts
El nuevo Componente Script de Next.js es una optimización fundamental que permite a los desarrolladores establecer la prioridad de carga de scripts de terceros para ahorrar tiempo y mejorar el rendimiento de carga.
Los sitios web a menudo necesitan terceros para cosas como análisis, anuncios, widgets de soporte al cliente y gestión de consentimiento. Sin embargo, estos scripts tienden a ser pesados para el rendimiento de carga y pueden perjudicar la experiencia del usuario. Los desarrolladores a menudo luchan por decidir dónde colocarlos en una aplicación para una carga óptima.
Con next/script, puedes definir la propiedad strategy y Next.js los priorizará automáticamente para mejorar el rendimiento de carga:
beforeInteractive: Para scripts críticos que necesitan ser cargados y ejecutados antes de que la página sea interactiva, como detección de bots y gestión de consentimiento. Estos scripts se inyectan en el HTML inicial desde el servidor y se ejecutan antes que el JavaScript auto-empaquetado.afterInteractive(predeterminado): Para scripts que pueden cargarse y ejecutarse después de que la página sea interactiva, como gestores de etiquetas y análisis. Estos scripts se inyectan en el lado del cliente y se ejecutarán después de la hidratación.lazyOnload: Para scripts que pueden esperar a cargarse durante tiempo inactivo, como soporte de chat y widgets de redes sociales.
También puedes ejecutar código después de la carga. Por ejemplo, puedes esperar a ejecutar código hasta que un usuario haya respondido al consentimiento:
También hemos cambiado la experiencia predeterminada de carga de scripts en Next.js 11 de pre-carga y async a defer. Los scripts de terceros a menudo compiten con recursos de mayor prioridad, como CSS, fuentes e imágenes. Mantener la secuencia adecuada relativa a estos recursos, así como otros scripts, es una carga indebida para los desarrolladores.
Al proporcionar un Componente Script con una estrategia de carga predeterminada de afterInteractive, los desarrolladores ahora tienen mejores valores predeterminados para un rendimiento óptimo, con la capacidad de aún elegir beforeInteractive cuando sea necesario.
Para aprender más sobre las decisiones técnicas detrás de cambiar el valor predeterminado, revisa el RFC y los desafíos con pre-carga del equipo de Google Chrome.
Mejoras en Imágenes
Estamos emocionados de compartir dos de las características más solicitadas por nuestra comunidad para el componente next/image, reduciendo Cumulative Layout Shift y creando una experiencia visual más fluida.
Detección automática de tamaño (Imágenes locales)
Usa la palabra clave import para el src de la imagen para definir automáticamente width y height para imágenes estáticas.
Por ejemplo, usar el componente Image incorporado ahora es aún más fácil:
Placeholders de Imágenes
next/image ahora soporta placeholders de desenfoque para suavizar la transición desde espacio en blanco a imagen y reducir el tiempo de carga percibido, particularmente para usuarios con conexiones a internet más lentas.
Para usar placeholders difuminados, añade placeholder="blur" a tu imagen.
Next.js también soporta difuminar imágenes dinámicas permitiéndote proporcionar un blurDataURL personalizado, que es proporcionado por tu backend. Por ejemplo, puedes generar un blurha.sh en el servidor.
Webpack 5
Con Next.js 10.2, expandimos el despliegue de webpack 5 a todas las aplicaciones sin una configuración personalizada de webpack en su next.config.js. Hoy, estamos haciendo que webpack 5 sea el predeterminado para todas las aplicaciones Next.js, lo que proporcionará una variedad de características y mejoras.
Hemos trabajado estrechamente con la comunidad para asegurar una transición suave a webpack 5, más de 3,400 pruebas de integración existentes de Next.js se ejecutan en cada solicitud de extracción con webpack 5 habilitado.
Si tu aplicación tiene una configuración personalizada de webpack, recomendamos seguir la documentación de actualización para webpack 5. Si encuentras algún problema, por favor comparte tus comentarios con nosotros.
Migración desde Create React App
En los últimos seis meses, hemos visto un aumento en aplicaciones migrando desde Create React App a Next.js para aprovechar muchas de las mejoras de experiencia del desarrollador y rendimiento para el usuario final que Next.js proporciona.
Para ayudar a los desarrolladores a convertir sus aplicaciones a Next.js, hemos introducido una nueva herramienta en @next/codemod que automáticamente convierte aplicaciones Create React App para que sean compatibles con Next.js.
La transformación automáticamente añade un directorio pages/ y mueve las importaciones de CSS a la ubicación correcta. También habilitará un modo de compatibilidad con Create React App en Next.js que asegura que algunos patrones usados en Create React App funcionen con Next.js.
Al aprovechar la nueva transformación, puedes adoptar Next.js incrementalmente mientras mantienes la funcionalidad de la aplicación existente de Create React App.
Para comenzar a migrar tu proyecto de Create React App usa el siguiente comando:
Esta característica es actualmente experimental, por favor comparte cualquier comentario en esta discusión.
Next.js Live (Versión preliminar)
Next.js Live es una continuación de nuestra misión de hacer el desarrollo no solo más rápido y agradable, sino crucialmente más inclusivo para toda la organización. Al aprovechar tecnología de vanguardia como ServiceWorker, WebAssembly y ES Modules, Next.js Live pone todo el proceso de desarrollo en el navegador web. Esto abre posibilidades como colaborar y compartir instantáneamente con una URL, sin un paso de construcción. Para desarrolladores, esto significa un ciclo de retroalimentación más rápido, menos tiempo esperando builds, y programación y edición en pareja en tiempo real dentro del navegador.
Para aprender más sobre Next.js Live y cómo puedes emparejarlo con el motor de colaboración en tiempo real de Vercel, ve la sección Next.js Live de la documentación.
Guía de actualización
Next.js 11 introduce algunos cambios importantes que no deberían afectar a la mayoría de usuarios. Estas características heredadas se han mantenido de manera compatible con versiones anteriores durante años, algunas desde v4.0.
Estas características fueron eliminadas para disminuir el tamaño del paquete y asegurar que el código base sea mantenible para el futuro. Para aprender más sobre actualizar desde la versión 10 a la 11, por favor ve la guía de actualización.
Con Next.js 11, la versión mínima de React ha sido actualizada a 17.0.2. Por favor ve el blog post de React 17 para más detalles. También estamos trabajando estrechamente con el equipo de React mientras introducen React 18. Next.js 11 usa createRoot cuando se está usando React 18 alpha.
Comunidad
Next.js es el resultado del trabajo combinado de más de 1,600 desarrolladores individuales, socios de la industria como Google y Facebook, y nuestro equipo central.
Estamos orgullosos de ver que la comunidad continúa creciendo. Solo en los últimos seis meses, hemos visto un aumento del 50% en descargas de Next.js en NPM, de 4.1M a 6.2M y el número de páginas principales usando Next.js en el top 10,000 de Alexa ha crecido un 50%.
Esta versión fue posible gracias a las contribuciones de: @kahy9, @ljosberinn, @leerob, @kettanaito, @thomasboyt, @hussainanjar, @styfle, @devknoll, @LiuuY, @timneutkens, @housseindjirdeh, @PepijnSenders, @janicklas-ralph, @payapula, @tmtk75, @ijjk, @hiramhuang, @daku10, @atcastle, @matamatanot, @pelhage, @Lukazovic, @Mzaien, @gleich, @geshan, @Munawwar, @ykzts, @vitalybaev, @mottox2, @vvo, @chrisneven, @turneand, @d3lm, @akellbl4, @sokra, @johnjago, @alicanyildirim, @sanathusk, @valse, @samrobbins85, @SamVerschueren, @ademilter, @ctjlewis, @brandondc741, @eltociear, @martpie, @kasipavankumar, @joecohens, @alexbrazier, @jamsinclair, @fabianishere, @rokinsky, @msidqi, @rubensdemelo, @Simply007, @bradlc, @SinimaWath, @rgabs, @darshkpatel, @sumanthratna, @shuding, @prophet1996, @Joonpark13, @tremby, @stefanprobst, @dopt, @rishabhpoddar, @aydinkn, @ErfanMirzapour, @tubbo, @frontendtony, @eric-burel, @iker-barriocanal, @eps1lon, @Gigiz, @mplis, @HaNdTriX, y @jigsawye.
Las siguientes características fueron mencionadas en Next.js Conf, pero fueron lanzadas antes a través de las versiones 10.1 y 10.2:
- Optimización Automática de Fuentes Web: Mejor rendimiento al incrustar CSS de fuentes.
- Actualización más rápida: 100ms a 200ms más rápida.
- Mejoras en
next/image: Soporte para Apple Silicon (M1), más opciones de diseño y cargadores. - Integración de Next.js Commerce con Shopify: Capa de datos flexible para aplicaciones de comercio electrónico componibles. Next.js Commerce actualmente soporta Shopify, BigCommerce, Saleor, Swell y Vendure.