Versión 13

Actualización de la versión 12 a la 13

Para actualizar a Next.js versión 13, ejecute el siguiente comando usando su gestor de paquetes preferido:

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

Nota importante: Si está usando TypeScript, asegúrese de actualizar también @types/react y @types/react-dom a sus últimas versiones.

Resumen de la versión 13

• Los Navegadores compatibles han cambiado para dejar de soportar Internet Explorer y enfocarse en navegadores modernos.
• La versión mínima de Node.js ha aumentado de 12.22.0 a 16.14.0, ya que las versiones 12.x y 14.x han llegado al fin de su vida útil.
• La versión mínima de React ha aumentado de 17.0.2 a 18.2.0.
• La propiedad de configuración swcMinify cambió de false a true. Consulte Compilador de Next.js para más información.
• La importación next/image se renombró a next/legacy/image. La importación next/future/image se renombró a next/image. Hay disponible un codemod para renombrar sus importaciones de forma segura y automática.
• El elemento hijo de next/link ya no puede ser <a>. Agregue la propiedad legacyBehavior para usar el comportamiento anterior o elimine el <a> para actualizar. Hay disponible un codemod para actualizar su código automáticamente.
• La propiedad de configuración target se ha eliminado y ha sido reemplazada por Rastreo de archivos de salida.

Migración de características compartidas

Next.js 13 introduce un nuevo directorio app con nuevas características y convenciones. Sin embargo, actualizar a Next.js 13 no requiere usar el nuevo directorio app.

Puede seguir usando pages con nuevas características que funcionan en ambos directorios, como el componente Image actualizado, el componente Link, el componente Script y la optimización de fuentes.

Componente <Image/>

Next.js 12 introdujo muchas mejoras al componente Image con una importación temporal: next/future/image. Estas mejoras incluían menos JavaScript del lado del cliente, formas más fáciles de extender y estilizar imágenes, mejor accesibilidad y carga diferida nativa del navegador.

A partir de Next.js 13, este nuevo comportamiento es ahora el predeterminado para next/image.

Hay dos codemods para ayudarle a migrar al nuevo componente Image:

• next-image-to-legacy-image: Este codemod renombrará automáticamente las importaciones de next/image a next/legacy/image para mantener el mismo comportamiento que Next.js 12. Recomendamos ejecutar este codemod para actualizar rápidamente a Next.js 13 de forma automática.
• next-image-experimental: Después de ejecutar el codemod anterior, puede optar por ejecutar este codemod experimental para actualizar next/legacy/image al nuevo next/image, lo que eliminará propiedades no utilizadas y agregará estilos en línea. Tenga en cuenta que este codemod es experimental y solo cubre usos estáticos (como <Image src={img} layout="responsive" />) pero no usos dinámicos (como <Image {...props} />).

Alternativamente, puede actualizar manualmente siguiendo la guía de migración y también ver la comparación con la versión anterior.

Componente <Link>

El componente <Link> ya no requiere agregar manualmente una etiqueta <a> como hijo. Este comportamiento se agregó como una opción experimental en la versión 12.2 y ahora es el predeterminado. En Next.js 13, <Link> siempre renderiza <a> y le permite pasar propiedades a la etiqueta subyacente.

Por ejemplo:

import Link from 'next/link'

// Next.js 12: `<a>` debe estar anidada, de lo contrario se excluye
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` siempre renderiza `<a>` internamente
<Link href="/about">
  About
</Link>

Para actualizar sus enlaces a Next.js 13, puede usar el codemod new-link.

Componente <Script>

El comportamiento de next/script se ha actualizado para soportar tanto pages como app. Si está adoptando app incrementalmente, lea la guía de actualización.

Optimización de fuentes

Anteriormente, Next.js ayudaba a optimizar fuentes mediante la inclusión de CSS de fuentes en línea. La versión 13 introduce el nuevo módulo next/font que le permite personalizar su experiencia de carga de fuentes mientras garantiza un gran rendimiento y privacidad.

Consulte Optimización de fuentes para aprender a usar next/font.