Next.js 11.1 | Next.js

Estamos mejorando el rendimiento de compilación en toda la pila con Next.js 11.1, que incluye:

Parche de Seguridad: Una actualización importante para prevenir redirecciones abiertas potenciales.
Soporte para ES Modules: Actívelo hoy con una bandera experimental.
Herramientas basadas en Rust: Integración de SWC para reemplazar herramientas JS (Babel y Terser).
Obtención de Datos más Rápida: 2x más rápido en la obtención de datos con HTTP keep-alive durante la prerenderización.
Source Maps más Rápidos: 70% más rápido en compilaciones y 67% menos uso de memoria al usar source maps.
Mejoras en la Integración de ESLint: Valores predeterminados más accesibles y linting para errores tipográficos.
Mejoras en next/image: Uso opcional de Sharp, mejor soporte para next export.

Actualice hoy ejecutando npm i next@latest.

Parche de Seguridad

El equipo de Next.js trabaja con investigadores de seguridad y auditores para prevenir vulnerabilidades. Agradecemos a Gabriel Benmergui de Robinhood por su investigación y descubrimiento de una redirección abierta con pages/_error.js y su posterior divulgación responsable.

El problema reportado no dañó directamente a los usuarios, pero podría permitir ataques de phishing al redirigir a un dominio del atacante desde un dominio confiable. Hemos implementado un parche en Next.js 11.1 que previene esta redirección abierta, junto con pruebas de regresión de seguridad.

Para más detalles, lea el CVE público. Recomendamos actualizar a la última versión de Next.js para mejorar la seguridad general de su aplicación. Para futuras divulgaciones responsables de reportes, envíenos un correo a [email protected].

Nota: Las aplicaciones Next.js alojadas en Vercel no están afectadas por esta vulnerabilidad (y, por lo tanto, no se requiere acción para sus aplicaciones Next.js en Vercel).

Soporte para ES Modules

Estamos trabajando en un amplio soporte para ES Modules en Next.js, tanto como módulos de entrada como objetivo de salida. A partir de Next.js 11.1, ahora puede importar paquetes npm usando ES Modules (ej. "type": "module" en su package.json) con una bandera experimental.

next.config.js

module.exports = {
  // Preferir carga de ES Modules sobre CommonJS
  experimental: { esmExternals: true },
};

El soporte para ES Modules incluye compatibilidad hacia atrás para mantener el comportamiento anterior de importación de CommonJS. En Next.js 12, esmExternals: true será el valor predeterminado. Recomendamos probar la nueva opción y dejar comentarios en GitHub Discussions si tiene sugerencias de mejora.

Adopción de SWC basado en Rust

Estamos trabajando en la integración de SWC, un compilador de JavaScript y TypeScript súper rápido escrito en Rust, que reemplazará dos cadenas de herramientas usadas en Next.js: Babel para archivos individuales y Terser para la minificación de paquetes de salida.

Como parte del reemplazo de Babel con SWC, estamos migrando todas las transformaciones de código personalizadas que Next.js usa a transformaciones SWC escritas en Rust para maximizar el rendimiento. Por ejemplo, eliminación de código no utilizado (tree shaking) dentro de getStaticProps, getStaticPaths, y getServerSideProps.

Como parte del reemplazo de Terser, estamos trabajando para asegurar que el minificador SWC tenga una salida similar a Terser mientras mejora masivamente el rendimiento y la paralelización de la minificación.

En pruebas iniciales, las transformaciones de código anteriores usando Babel bajaron de ~500ms a ~10ms y la minificación de código con Terser bajó de ~250ms a ~30ms usando SWC. En general, esto resultó en compilaciones dos veces más rápidas.

Nos complace anunciar que DongYoon Kang, el creador de SWC, y Maia Teegarden, contribuidora de Parcel, se han unido al equipo de Next.js en Vercel para trabajar en mejorar el rendimiento de next dev y next build. Compartiremos más resultados de nuestra adopción de SWC en la próxima versión cuando se estabilice.

Mejoras de Rendimiento

Compilaciones y Obtención de Datos

Al usar next build y realizar numerosas solicitudes HTTP, hemos mejorado el rendimiento en ~2x en promedio. Por ejemplo, si está usando getStaticProps y getStaticPaths para obtener contenido de un CMS Headless, debería notar compilaciones notablemente más rápidas.

Next.js ahora incluye automáticamente un polyfill para node-fetch y habilita HTTP Keep-Alive por defecto. Según benchmarks externos, esto debería hacer la prerenderización ~2x más rápida.

Para deshabilitar HTTP Keep-Alive en ciertas llamadas fetch(), puede agregar la opción agent:

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

Para sobrescribir todas las llamadas fetch() globalmente, puede usar next.config.js:

next.config.js

module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

Source Maps

Incluir source maps del navegador en aplicaciones Next.js ahora tiene un costo de rendimiento aproximadamente 70% menor y un uso de memoria aproximadamente 67% menor debido a optimizaciones en el procesamiento de assets y source maps de webpack.

Esto solo afecta a aplicaciones Next.js con productionBrowserSourceMaps: true en su archivo next.config.js. Con Next.js 11.1, los tiempos de compilación solo aumentan un 11% cuando los source maps están habilitados.

También hemos trabajado con Sentry para mejorar el rendimiento de la carga de source maps con el plugin de Sentry para Next.js.

Mejoras en ESLint

En Next.js 11, introdujimos soporte integrado para ESLint a través de next lint. Desde su lanzamiento inicial, hemos seguido agregando reglas que ayudan a los desarrolladores a corregir errores comunes en sus aplicaciones.

Reglas de Accesibilidad Predeterminadas

Ahora se incluyen mejores reglas de accesibilidad por defecto, previniendo problemas con propiedades ARIA que no coinciden entre sí y el uso de atributos ARIA inexistentes. Estas reglas mostrarán advertencias por defecto.

Un agradecimiento especial al contribuidor de la comunidad JeffersonBledsoe por agregar estas reglas.

Errores Tipográficos Comunes

Ahora se mostrarán advertencias por defecto para errores tipográficos comunes en getStaticProps, getStaticPaths, y getServerSideProps. Esto ayudará en casos donde un pequeño error tipográfico evita que se llame a la obtención de datos. Por ejemplo, getstaticprops o getStaticprops mostrarán una advertencia.

Un agradecimiento especial al contribuidor de la comunidad kaykdm por crear esta regla.

Mejoras en `next/image`

Hemos recopilado comentarios de la comunidad sobre next/image y la Optimización de Imágenes integrada, y estamos emocionados de compartir múltiples mejoras en rendimiento, experiencia del desarrollador y experiencia del usuario.

Optimización de Imágenes

Por defecto, Next.js usa WebAssembly para realizar la Optimización de Imágenes, lo que compensa el tiempo de instalación del paquete Next.js al ser significativamente más pequeño y no tener un paso post-instalación. Con Next.js 11.1, puede instalar opcionalmente sharp que optimiza el tiempo de generación de imágenes no cacheadas con el trade-off de una instalación más lenta.

El optimizador de imágenes basado en WebAssembly ha sido actualizado para soportar chips ARM como Apple M1 con Node.js 16.

El optimizador de imágenes integrado ahora detecta automáticamente el tipo de contenido de imágenes externas basado en el cuerpo de la respuesta. Esto permite a Next.js optimizar imágenes alojadas en AWS S3 cuando el encabezado de respuesta es Content-Type: application/octet-stream.

Generación Diferida de Placeholders Blur en Desarrollo

Durante next dev, las importaciones de imágenes estáticas con placeholder="blur" ahora se generan de forma diferida automáticamente, mejorando el tiempo de inicio del servidor de desarrollo para aplicaciones con muchas importaciones de imágenes estáticas:

pages/index.js

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // El placeholder para esta imagen se genera de forma diferida durante el desarrollo
    <Image src={author} alt="Foto del autor" placeholder="blur" />
  );
}

Otras Mejoras en Imágenes

Imágenes previamente cargadas ya no se cargan de forma diferida: Cuando una imagen ha sido cargada en una página antes, ya sea a través de navegación del cliente o cargándola en otro punto de la página, Next.js ahora omitirá automáticamente la carga diferida para evitar un destello rápido antes de mostrar la imagen.
Soporte para cargadores de imágenes personalizados con next export: next/image ahora soporta usar next export junto con cualquier servicio de optimización de imágenes de terceros. Puede configurar images.loader: "custom" en next.config.js cuando tenga la intención de proporcionar el prop loader personalizado a next/image.
Nuevo evento para cuando las imágenes terminan de cargar: Basado en comentarios de usuarios, hemos agregado una nueva propiedad onLoadingComplete a next/image. Esto permite registrar un callback que se invoca una vez que la imagen se ha cargado completamente.
Configuración para el TTL (Tiempo de Vida) predeterminado de caché de imágenes: Ahora puede configurar images.minimumCacheTTL en next.config.js para cambiar el TTL predeterminado de caché para imágenes optimizadas. Cuando sea posible, recomendamos usar importaciones de imágenes static, ya que estas usan automáticamente el TTL máximo porque el hash del contenido de la imagen está en la URL.

Comunidad

Next.js es el resultado del trabajo combinado de más de 1,700 desarrolladores individuales, socios de la industria como Google y Facebook, y nuestro equipo central.

Estamos orgullosos de ver que la comunidad sigue creciendo. Solo en los últimos seis meses, hemos visto un aumento del 50% en las descargas de Next.js en NPM, de 4.1M a 6.2M y el número de páginas de inicio que usan Next.js en el top 10,000 de Alexa ha crecido un 50%.

Esta versión fue posible gracias a las contribuciones de: @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey