BackVolver al blog

Next.js 10.2

Next.js 10.2 introduce mejoras de rendimiento (construcciones más rápidas, actualización y inicio), mejor accesibilidad, Optimización Automática de Fuentes Web, ¡y más!

Estamos emocionados de presentar Next.js 10.2, que incluye:

Actualiza hoy ejecutando npm i next@latest.

Webpack 5

Con Next.js 10.1, mejoramos Fast Refresh y reducimos los tiempos de instalación. Estamos emocionados de compartir mejoras adicionales de rendimiento habilitadas a través de webpack 5.

Hoy, estamos expandiendo el despliegue de webpack 5 a aplicaciones Next.js. A partir de Next.js 10.2, todas las aplicaciones que no usen una configuración personalizada de webpack en su next.config.js usarán automáticamente webpack 5.

Cuando webpack 5 está habilitado, obtendrás automáticamente nuevas características y mejoras como:

  • Mejor Caché en Disco: El caché en disco permite que el compilador persista el trabajo entre ejecuciones de next build. Solo los archivos modificados serán recompilados, lo que lleva a un mayor rendimiento. El cliente de Vercel Scale observó una aceleración del 63% en construcciones posteriores.
  • Mejor Fast Refresh: Next.js ahora prioriza la compilación relacionada con Fast Refresh, resultando en una actualización 100ms a 200ms más rápida cada vez.
  • Mejor Caché a Largo Plazo de Activos: La salida entre múltiples ejecuciones de next build ahora es determinista, mejorando el caché del navegador para activos JavaScript en producción. Los hashes se mantienen iguales cuando el contenido de una página no cambia.
  • Mejor Tree Shaking: Los módulos CommonJS ahora pueden ser tree shaken para eliminar automáticamente código no utilizado. Se usa análisis estático para determinar módulos libres de efectos secundarios. export * rastrea más información y ya no marca la exportación por defecto como usada. También se habilita el tree-shaking interno de módulos, permitiendo que imports que solo se usan en una exportación no utilizada sean tree shaken.

Hemos trabajado duro para asegurar una transición suave de webpack 4 a 5. El conjunto de pruebas principal de Next.js con más de 3,400 pruebas de integración se ejecuta en cada pull request con soporte para webpack 5 habilitado.

Si tu aplicación tiene una configuración personalizada de webpack, recomendamos seguir la documentación para habilitar webpack 5. Después de actualizar a webpack 5 en Next.js, por favor comparte tus comentarios con nosotros.

Mejor Rendimiento de Inicio

Hemos mejorado la inicialización de la CLI de Next.js haciendo que el tiempo de arranque para next dev sea hasta 24% más rápido después de la primera ejecución. Por ejemplo, next dev para vercel.com pasó de 3.3s a 2.5s.

Estamos en una misión para hacer que tu experiencia de desarrollo local sea en tiempo real (20x más rápida). Mantente atento para más mejoras de rendimiento de inicio en próximas versiones.

Mejoras de Accesibilidad

Los cambios de ruta ahora son anunciados a lectores de pantalla y otras tecnologías de asistencia por defecto.

El ejemplo a continuación muestra el encabezado "Real Data. Real Performance" siendo anunciado por macOS VoiceOver en navegación del lado del cliente. El nombre de la página se encuentra buscando primero un elemento <h1>, recurriendo a document.title, y finalmente al pathname.

Los cambios de ruta ahora son anunciados automáticamente.

Gracias a Kyle Boss y Kitty Giraudel por ayudar a implementar esta característica.

Enrutamiento basado en Cabeceras y Parámetros de Consulta

Las reescrituras, redirecciones, y cabeceras de Next.js ahora soportan una nueva propiedad has que te permite coincidir con cabeceras entrantes, cookies y parámetros de consulta.

El cliente de Vercel Joyn usa has para optimizar contenido tanto para descubribilidad como rendimiento. Por ejemplo, podrías redirigir navegadores antiguos basado en el User-Agent:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

Otro ejemplo podría ser redirigir usuarios basado en su ubicación:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

Finalmente, podrías redirigir si un usuario ya ha iniciado sesión:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

Para aprender más y explorar ejemplos adicionales, revisa la documentación de redirecciones.

Optimización Automática de Fuentes Web

82% de las páginas web para escritorio usan fuentes web. Las fuentes personalizadas son importantes para la marca, diseño y consistencia entre navegadores/dispositivos de tu sitio. Sin embargo, usar una fuente web no debería venir a costa del rendimiento.

Next.js ahora soporta Optimización Automática de Fuentes Web cuando se usan fuentes web. Por defecto, Next.js incluirá automáticamente el CSS de fuentes en tiempo de construcción, eliminando un viaje adicional para obtener declaraciones de fuentes. Esto resulta en mejoras a First Contentful Paint (FCP) y Largest Contentful Paint (LCP). Por ejemplo:

// Antes
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// Después
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

La Optimización Automática de Fuentes Web actualmente soporta Google Fonts y estamos trabajando para expandir el soporte a otros proveedores de fuentes. También planeamos añadir control sobre estrategias de carga y valores de font-display. Al optimizar fuentes por defecto, podemos ayudar a los desarrolladores a enviar sitios más rápidos y mejorar sus Core Web Vitals sin esfuerzo adicional.

Gracias a nuestros socios en Google y Janicklas Ralph por ayudar a implementar esta característica.

Creciendo el Equipo

Estamos emocionados de anunciar que Tobias Koppers, el autor de webpack, se ha unido al equipo de Next.js en Vercel.

Comunidad

Estamos agradecidos con nuestra comunidad, incluyendo todos los comentarios externos y contribuciones que ayudaron a dar forma a esta versión.

Esta versión fue posible gracias a las contribuciones de: @rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18, y @jarrodwatts.