Next.js 12

Como anunciamos en Next.js Conf, Next.js 12 es nuestro lanzamiento más grande hasta ahora:

• Compilador Rust: Fast Refresh ~3x más rápido y builds ~5x más rápidos
• Middleware (beta): Máxima flexibilidad en Next.js con código en lugar de configuración
• Soporte para React 18: APIs nativas de Next.js ahora compatibles, incluyendo Suspense
• Soporte AVIF en <Image />: Imágenes un 20% más pequeñas (opcional)
• Fallback ISR consciente de bots: SEO optimizado para rastreadores web
• Soporte nativo para ES Modules: Alineado con el sistema de módulos estándar
• Importaciones desde URL (alpha): Importa paquetes desde cualquier URL sin instalación
• React Server Components (alpha): Pruébalo hoy, incluyendo streaming SSR

Actualiza hoy ejecutando npm i next@latest.

Builds más rápidos y Fast Refresh con el compilador Rust

Queremos que cada aplicación Next.js se compile más rápido para producción y obtenga retroalimentación instantánea en desarrollo local. Next.js 12 incluye un nuevo compilador Rust que aprovecha la compilación nativa.

Nuestro compilador Rust está construido sobre SWC, una plataforma abierta para la próxima generación de herramientas rápidas. Hemos optimizado el bundling y compilación con ~3x más velocidad en Fast Refresh localmente y ~5x más velocidad en builds para producción. Otras mejoras incluyen:

Resultados usando el nuevo compilador Rust con grandes codebases de Next.js.

• Mayor velocidad para codebases grandes: Hemos validado el compilador Rust con algunas de las codebases Next.js más grandes del mundo.
• Mejor observabilidad del rendimiento: Next.js ahora muestra tiempos de Fast Refresh en la consola para compilación cliente y servidor, incluyendo módulos y archivos compilados.
• Mejoras subyacentes en webpack: Hicimos numerosas mejoras a webpack, optimizando Fast Refresh y haciendo más confiables las entradas bajo demanda.

La compilación con Rust es 17x más rápida que Babel y está habilitada por defecto en Next.js 12, reemplazando la transformación de archivos JavaScript y TypeScript. Esto requirió portar las transformaciones Babel de Next.js a Rust, incluyendo un nuevo parser CSS en Rust usado para implementar la transformación styled-jsx.

El nuevo compilador Rust es compatible con versiones anteriores. Si tienes una configuración Babel existente, se desactivará automáticamente. Planeamos portar pronto bibliotecas populares como styled-components, emotion y relay. Si usas una configuración Babel personalizada, comparte tu configuración.

También puedes optar por usar el compilador Rust para minificación. Esto es 7x más rápido que Terser. La minificación es opcional hasta validarse completamente, ya que reemplaza infraestructura de varios años.

module.exports = {
  swcMinify: true,
};

Además de contratar a DongYoon Kang, creador de SWC, y Maia Teegarden, contribuidora de Parcel, seguimos invirtiendo en el ecosistema Rust. Si tienes experiencia con Rust, únete a nuestro equipo.

Para más información, mira nuestro demo de Next.js Conf.

Introduciendo Middleware

Middleware te permite usar código en lugar de configuración. Esto brinda máxima flexibilidad en Next.js al ejecutar código antes de completar una petición. Basado en la petición entrante, puedes modificar la respuesta reescribiendo, redireccionando, añadiendo headers o incluso transmitiendo HTML.

Middleware te da flexibilidad completa dentro de Next.js.

Middleware puede usarse para cualquier lógica compartida entre páginas, incluyendo:

• Autenticación
• Protección contra bots
• Redirecciones
• Reescrituras
• Feature flags y pruebas A/B
• Requerimientos avanzados de enrutamiento i18n
• ¡Y mucho más!

Middleware usa un runtime estricto que soporta APIs Web estándar como fetch. Funciona directamente con next start, y en plataformas Edge como Vercel usando Edge Middleware.

Para usar Middleware en Next.js, crea un archivo pages/_middleware.js. En este ejemplo usamos la API Web Response estándar (MDN):

export function middleware(req, ev) {
  return new Response('Hello, world!');
}

Para más información, mira nuestro demo de Next.js Conf y consulta la documentación.

Preparándose para React 18

React 18 añadirá features como Suspense, batch automático de updates, APIs como startTransition, y una nueva API de streaming para renderizado en servidor con soporte para React.lazy.

Hemos trabajado con el equipo de React en Facebook para preparar Next.js para React 18 hacia su lanzamiento estable. Estos features están disponibles hoy en Next.js 12 bajo una bandera experimental.

npm install react@alpha react-dom@alpha

Streaming en el servidor

Features concurrentes en React 18 incluyen soporte nativo para Suspense en servidor y streaming SSR. Esto permite renderizar páginas en servidor usando streaming HTTP. Es un feature experimental en Next.js 12, pero una vez habilitado, SSR usará el mismo runtime estricto que Middleware.

Para habilitarlo, usa la bandera experimental concurrentFeatures: true:

module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
};

Componentes de React del Servidor (React Server Components)

Los Componentes de React del Servidor (React Server Components) nos permiten renderizar todo, incluidos los componentes mismos, en el servidor. Esto es fundamentalmente diferente del renderizado del lado del servidor (SSR) donde se pregenera HTML en el servidor. Con los Componentes del Servidor, no se necesita JavaScript en el lado del cliente, lo que hace que el renderizado de páginas sea más rápido. Esto mejora la experiencia del usuario de su aplicación, combinando lo mejor del renderizado del servidor con la interactividad del lado del cliente.

module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

Next.js ahora permite realizar la obtención de datos a nivel de componente, todo expresado como JSX. Al usar Componentes de React del Servidor, podemos simplificar las cosas. Ya no son necesarias funciones especiales como getServerSideProps o getStaticProps. Esto se alinea con el modelo de React Hooks de colocar la obtención de datos junto a sus componentes.

Puede renombrar cualquier página de Next.js a .server.js para crear un Componente del Servidor e importar componentes del cliente directamente dentro de sus Componentes del Servidor. Estos componentes del cliente se hidratarán y volverán interactivos, por lo que puede agregar funcionalidades como votaciones.

Actualmente estamos trabajando en Suspense del lado del servidor, hidratación selectiva y renderizado por streaming en Next.js y compartiremos nuestro progreso en una futura publicación del blog.

Un agradecimiento especial a nuestros colaboradores Kara Erickson y Gerald Monaco del equipo Google Aurora por su trabajo en React 18 y Componentes del Servidor.

Para más información, vea nuestra demostración de Next.js Conf y consulte la documentación.

Soporte para Módulos ES e Importaciones por URL

Los módulos ES traen un sistema de módulos oficial y estandarizado a JavaScript. Son compatibles con todos los principales navegadores, así como con Node.js.

Este estándar impulsa el ecosistema web al permitir tamaños de paquetes y bundles de JavaScript más pequeños, lo que finalmente conduce a una mejor experiencia de usuario. A medida que el ecosistema de JavaScript transita de Common JS (el estándar antiguo) a módulos ES, estamos comprometidos a ayudar a los desarrolladores a adoptar estas mejoras de manera incremental sin cambios disruptivos innecesarios.

A partir de Next.js 11.1, agregamos soporte experimental para módulos ES priorizándolos sobre los módulos CommonJS. En Next.js 12, esto ahora es el comportamiento predeterminado. La importación de módulos NPM que solo proporcionan CommonJS sigue siendo compatible.

Importaciones por URL

Next.js 12 incluye soporte experimental para importar módulos ES a través de URLs, sin necesidad de instalación o un paso de compilación separado.

Las importaciones por URL le permiten usar cualquier paquete directamente a través de una URL. Esto permite que Next.js procese recursos HTTP(S) remotos exactamente como dependencias locales.

Si se detecta una importación por URL, Next.js generará un archivo next.lock para rastrear recursos remotos. Las importaciones por URL se almacenan en caché localmente para garantizar que pueda seguir trabajando sin conexión. Next.js admite importaciones por URL tanto en el cliente como en el servidor.

Para activar esta función, agregue los prefijos de URL permitidos dentro de next.config.js:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
};

Luego, puede importar módulos directamente desde URLs:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

Funcionará con cualquier CDN que sirva módulos ES, incluidas herramientas de diseño y sin código como Framer:

• Skypack
• esm.sh
• jsDelivr
• JSPM
• unpkg

Para más información, vea nuestra demostración de Next.js Conf y consulte la documentación.

Fallback de ISR Consciente de Bots (Bot-Aware ISR Fallback)

Actualmente, la Regeneración Estática Incremental (ISR) con fallback: true muestra un estado de fallback antes de renderizar el contenido de la página en la primera solicitud a una página que aún no se ha generado. Para bloquear la carga de la página (renderizado del servidor), necesitaría usar fallback: 'blocking'.

En Next.js 12, los rastreadores web (ej. bots de búsqueda) renderizarán automáticamente las páginas ISR en el servidor usando fallback: true, mientras que seguirán sirviendo el comportamiento anterior del estado de fallback a User-Agents que no sean rastreadores. Esto evita que los rastreadores indexen estados de carga.

Imágenes más pequeñas usando AVIF

La API integrada de Optimización de Imágenes ahora admite imágenes AVIF, lo que permite imágenes un 20% más pequeñas en comparación con WebP.

Las imágenes AVIF pueden tardar más en optimizarse en comparación con WebP, por lo que estamos haciendo que esta función sea opcional usando la nueva propiedad images.formats en next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Esta lista de formatos se utiliza para determinar el formato de imagen optimizado bajo demanda usando el encabezado Accept de la solicitud. Como AVIF es el primero, se servirá si el navegador admite AVIF. Si no, se servirá WebP si el navegador admite WebP. Si ninguno de los formatos es compatible, se servirá el formato de imagen original.

Seguimiento de Archivos de Salida (Output File Tracing)

En Next.js 8, introdujimos la opción target. Esto permitía generar páginas de Next.js como bundles de JavaScript independientes al agrupar todas las dependencias usando webpack durante la compilación. Rápidamente nos dimos cuenta de que esto no era ideal y en su lugar creamos @vercel/nft. @vercel/nft se ha utilizado durante más de 2 años en todas las implementaciones en la plataforma Vercel.

Ahora, estamos incorporando estas mejoras directamente en el framework Next.js de forma predeterminada, para todas las plataformas de implementación, proporcionando un enfoque significativamente mejorado sobre la opción target.

Next.js 12 rastrea automáticamente qué archivos son necesarios para cada página y ruta de API usando @vercel/nft, y genera estos resultados de seguimiento junto con la salida de next build, lo que permite a los integradores aprovechar los seguimientos que Next.js proporciona automáticamente.

Estos cambios también optimizan las aplicaciones que se implementan usando herramientas como Docker a través de next start. Al aprovechar @vercel/nft, podremos hacer que la salida de Next.js sea independiente en el futuro. No se requerirá instalar dependencias para ejecutar la aplicación, reduciendo enormemente el tamaño de la imagen de Docker.

La incorporación de @vercel/nft en Next.js reemplaza el enfoque target, haciendo que target quede obsoleto en Next.js 12. Consulte la documentación para más información.

Otras Mejoras

• Agregar pages/_app.js o pages/_document.js a su aplicación ahora reemplaza automáticamente la versión integrada sin requerir un reinicio de la CLI de Next.js.
• La integración de ESLint ahora admite linting de archivos individuales en next lint con la bandera --file.
• Next.js 12 ahora admite establecer una ruta personalizada para tsconfig.json.
• Ahora se admite next.config.mjs para escribir la configuración como módulos ES.
• Las solicitudes en curso ahora se deduplican para getStaticProps.
• La verificación de páginas estáticas ahora se ejecuta utilizando un grupo compartido de workers.
• Fast Refresh ahora usa una conexión WebSocket en lugar de una conexión EventSource.

Cambios Importantes (Breaking Changes)

• Después de hacer que webpack 5 sea el predeterminado en Next.js 11, ahora hemos eliminado oficialmente webpack 4. Hemos trabajado estrechamente con la comunidad para garantizar una transición fluida a webpack 5.
• Ya no es necesario usar target en next.config.js.
• next/image ahora usa un span como elemento envolvente en lugar de un div.
• La versión mínima de Node.js ha aumentado de 12.0.0 a 12.22.0, que es la primera versión de Node.js con soporte nativo para módulos ES.

Para obtener más información, consulte la guía de actualización.

Comunidad

Hace cinco años, lanzamos Next.js al público. Nos propusimos construir un framework de React sin configuración que simplificara su experiencia de desarrollador. Mirando atrás, es increíble ver cómo ha crecido la comunidad y lo que hemos podido lograr juntos. Sigamos adelante.

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

Esta versión fue posible gracias a las contribuciones de: @ka2n, @housseindjirdeh, @rojserbest, @lobsterkatie, @thibautsabot, @javivelasco, @sokra, @rishabhpoddar, @kdy1, @huozhi, @georgegach, @ionut-botizan, @paul-creates, @TimBarley, @kimizuy, @devknoll, @matamatanot, @christianvuerings, @pgrodrigues, @mohamedbhy, @AlfonzAlfonz, @kara, @molebox, @angelopoole, @oste, @genetschneider, @jantimon, @kyliau, @mxschmitt, @PhattOZ, @finn-orsini, @kriswuollett, @harryheman, @GustavoEdinger, @AryanBeezadhur, @Blevs, @colevscode, @atcastle, @ijjk, @velocity23, @jonowu, @timneutkens, @whitep4nth3r, @micro-chipset, @TyMick, @padmaia, @arthurdenner, @vitorbal, @zNeb, @jacksonhardaker, @shuding, @kylemh, @Bundy-Mundi, @ctjlewis, @thien-do, @leerob, @Dev-CasperTheGhost, @janicklas-ralph, @rezathematic, @KonstHardy, @fracture91, @lorensr, @Sheraff, @HaNdTriX, @emilio, @oluan, @ddzieduch, @colinclerk, @x4th, @volcareso, @oiva, @sinchang, @scottrepreneur, @smakosh, @catnose99, @adrienharnay, @donsn, @andersonleite, @msp5382, @tim-hanssen, @appsplash99, @alexvilchis, @RobEasthope, @royal, @Perry-Olsson, @well-balanced, @mrmckeb, @buraksakalli, @espipj, @prateekbh, @AleksaC, @eungyeole, y @rgabs