Next.js 12.3

Hemos implementado mejoras en la calidad de vida para Next.js con la versión 12.3:

• Fast Refresh mejorado: Los archivos .env, jsconfig.json y tsconfig.json ahora se recargan en caliente.
• Instalación automática de TypeScript: Añade un archivo .ts para configurar automáticamente TypeScript e instalar dependencias.
• Componente Image: next/future/image es ahora estable.
• Minificador SWC: La minificación con el compilador de Next.js es ahora estable.
• Actualización del nuevo enrutador + diseños: Ha comenzado la implementación y se explican nuevas características.

Actualiza hoy ejecutando npm i next@latest.

Anunciamos la tercera conferencia global de la comunidad Next.js el 25 de octubre. Regístrate ahora →

Next.js Conf

Estás invitado a la conferencia global de la comunidad Next.js el 25 de octubre. Para el 6º aniversario de Next.js, presentaremos:

• Funcionalidades que aprovechan React Server Components, Streaming y Suspense.
• Convenciones que facilitan a los desarrolladores optimizar y escalar aplicaciones.
• Herramientas de código abierto que hacen más rápido el desarrollo local y las builds de producción.

Consigue tu entrada gratuita y descubre el futuro de Next.js y React, y sigue @nextjs para más anuncios pronto. También buscamos charlas de la comunidad. Envía una propuesta de charla y comparte la historia de lo que estás construyendo con Next.js.

Instalación automática de TypeScript

Next.js tiene soporte integrado para configurar TypeScript automáticamente. Anteriormente, añadir TypeScript a un proyecto existente requería instalar manualmente las dependencias necesarias.

Con esta versión, Next.js detecta automáticamente cuando se añaden archivos TypeScript a un proyecto, instala las dependencias necesarias y añade un archivo tsconfig.json. Esto funciona al ejecutar next dev y next build.

Video que muestra Next.js instalando TypeScript automáticamente.

Fast Refresh mejorado

Las iteraciones rápidas son críticas para tu flujo de trabajo de desarrollo local. Next.js usa Fast Refresh para obtener retroalimentación instantánea en los cambios realizados a tus componentes React. Guarda y verás tus cambios reflejados en el navegador sin necesidad de recargar la página.

Con Next.js 12.3, algunos archivos de configuración ahora también se recargan en caliente al realizar cambios, incluyendo:

• .env y variantes env.*
• jsconfig.json
• `tsconfig.json**

Ahora no necesitas reiniciar tu servidor de desarrollo local al hacer cambios en estos archivos de configuración.

Video que muestra Next.js recargando en caliente un archivo .env.

Componente Image

Componente next/future/image (Estable)

En Next.js 12.2, compartimos una vista previa experimental de un nuevo componente Image que simplifica cómo estilizas imágenes y mejora el rendimiento usando la carga diferida nativa del navegador.

El nuevo componente Image es ahora estable y ya no requiere una bandera experimental.

Desde el último lanzamiento, hemos hecho más mejoras:

• Añadido soporte para el modo de diseño fill que hace que la imagen llene el elemento padre.
• Mejorado el marcador de posición blur-up para que funcione con imágenes transparentes, ya no necesita <noscript>, y next dev coincide con next start.
• Prevenido un cambio de diseño sutil (en navegadores distintos a Chrome) ocultando el texto alt mientras la imagen se carga.
• Requerida la propiedad alt para mejor accesibilidad.
• Corregida la propiedad onError cuando ocurre un error antes de la hidratación.
• Corregida la relación de aspecto para imágenes importadas estáticamente que solo tienen propiedad width o height.
• Mejorados los mensajes de error al usar configuraciones incorrectas.

En el futuro, planeamos renombrar next/image a next/legacy/image y next/future/image a next/image. Esto proporcionará una gran experiencia para nuevos proyectos Next.js y los proyectos existentes podrán migrar fácilmente usando nuestro codemod next/image. Proporcionaremos más detalles antes de la próxima versión mayor.

Para más información sobre cómo usarlo hoy, consulta la documentación que incluye una guía de migración.

Patrones remotos (Estable)

remotePatterns te permite especificar comodines para imágenes remotas al usar la API integrada de optimización de imágenes. Permite un emparejamiento más potente más allá de la configuración existente images.domains, que solo realiza coincidencias exactas en el nombre de dominio.

Esta opción es ahora estable y puede usarse con la siguiente opción de configuración:

module.exports = {
  images: {
    remotePatterns: [
      {
        // El hostname de la propiedad `src` debe terminar con `.example.com`,
        // de lo contrario la API responderá con 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

Desactivar optimización de imágenes (Estable)

La API de optimización de imágenes requiere un servidor para optimizar imágenes bajo demanda según se solicitan. Esto funciona genial cuando se autoalojan con next start o se despliegan en plataformas como Vercel. Sin embargo, esto no funcionará con next export porque no incluye un servidor para optimizar imágenes. Anteriormente, necesitabas configurar un proveedor de optimización de imágenes de terceros usando la prop loader, pero ahora puedes desactivar completamente la optimización de imágenes usando next.config.js para todas las instancias de next/image.

Esta opción anteriormente experimental es ahora estable y puede usarse con la siguiente opción de configuración:

module.exports = {
  images: {
    unoptimized: true,
  },
};

Minificador SWC (Estable)

En Next.js 12, introdujimos la minificación de código usando SWC como parte de las características experimentales del Compilador Next.js. Los primeros resultados mostraron que la minificación con SWC era 7 veces más rápida que la versión anterior con Terser.

Con esta versión, la característica es estable y puedes activarla usando la siguiente opción en next.config.js:

module.exports = {
  swcMinify: true,
};

Planeamos hacer que el minificador SWC sea el predeterminado en la próxima versión mayor.

Actualización del nuevo enrutador y diseños

A principios de este año, publicamos el RFC de Diseños que introdujo la mayor actualización de Next.js desde su lanzamiento en 2016. Estos cambios incluyen un nuevo enrutador construido sobre React Server Components. El trabajo de implementación ha comenzado y estamos trabajando hacia una beta pública en la próxima versión mayor.

Hoy, compartimos más información sobre las próximas características, incluyendo:

• Grupos de rutas: Se usan para excluir rutas de diseños y organizar rutas sin afectar las rutas URL.
• Estados de carga instantáneos: Nueva convención de archivos para añadir fácilmente UI de carga, construida con Suspense.
• Manejo de errores: Nueva convención de archivos para añadir fácilmente límites de error anidados y UI de error.
• Plantillas: Nueva convención de archivos para añadir UI compartida que crea una instancia diferente y no comparte estado.
• Rutas interceptadas, Rutas paralelas y Rutas condicionales: Nuevas convenciones que te permiten implementar patrones de enrutamiento avanzados.

Además, en un RFC diferente, estamos explorando añadir soporte para Importaciones de CSS Global en el nuevo directorio app. Esto te permitiría usar paquetes que importan sus propios archivos .css sin configuración adicional.

Lee más sobre estas nuevas características en el RFC de Diseños.

Otras mejoras

• Nueva documentación sobre las características de accesibilidad integradas en Next.js.
• Las plantillas de create-next-app ahora incluyen soporte para modo oscuro automáticamente usando la preferencia de tu sistema.
• src/ es ahora un directorio de linting predeterminado al usar el soporte integrado de ESLint.
• next.config.js ahora incluye validación de esquema con ajv, ayudando a prevenir el mal uso de las opciones de configuración.
• next.config.js ahora tiene una bandera de configuración experimental fallbackNodePolyfills: false para evitar que Next.js rellene APIs de Node.js para el navegador (lo que lleva a tamaños de paquete aumentados). Esta opción hará que Next.js muestre un error en tiempo de build indicando de dónde viene la importación innecesaria.

Comunidad

Next.js es el resultado del trabajo combinado de más de 2,000 desarrolladores individuales, socios de la industria como Google Chrome y Meta, y nuestro equipo central en Vercel.

Esta versión fue posible gracias a las contribuciones de: @pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, y @zanechua.