Versión 13

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

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

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# o
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# o
pnpm up next react react-dom eslint-config-next --latest
# o
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

Resumen de la versión 13

• Los Navegadores compatibles han cambiado, eliminando soporte para Internet Explorer y enfocándose 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 ciclo de vida.
• 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. Consulta 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 tus importaciones de forma segura y automática.
• El elemento hijo de next/link ya no puede ser <a>. Agrega la propiedad legacyBehavior para mantener el comportamiento anterior o elimina el <a> para actualizar. Hay disponible un codemod para actualizar tu código automáticamente.
• La propiedad de configuración target ha sido eliminada y 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.

Puedes seguir usando pages con nuevas características que funcionan en ambos directorios, como el componente Image actualizado, componente Link, componente Script y 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 ayudarte 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, puedes opcionalmente ejecutar este codemod experimental para actualizar next/legacy/image al nuevo next/image, lo que eliminará propiedades no usadas y agregará estilos en línea. Ten en cuenta que este codemod es experimental y solo cubre uso estático (como <Image src={img} layout="responsive" />) pero no uso dinámico (como <Image {...props} />).

Alternativamente, puedes 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 añadió como opción experimental en la versión 12.2 y ahora es el predeterminado. En Next.js 13, <Link> siempre renderiza <a> y te permite pasar propiedades a la etiqueta subyacente.

Por ejemplo:

import Link from 'next/link'

// Next.js 12: `<a>` debe estar anidado o se excluirá
<Link href="/about">
  <a>About</a>
</Link>

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

Para actualizar tus enlaces a Next.js 13, puedes usar el codemod new-link.

Componente <Script>

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

Optimización de fuentes

Anteriormente, Next.js ayudaba a optimizar fuentes inlinando CSS de fuentes. La versión 13 introduce el nuevo módulo next/font que te da la capacidad de personalizar tu experiencia de carga de fuentes manteniendo un gran rendimiento y privacidad.

Consulta Optimización de fuentes para aprender cómo usar next/font.