Cómo actualizar a la versión 11

Para actualizar a la versión 11, ejecuta el siguiente comando:

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

Webpack 5 ahora es la opción predeterminada para todas las aplicaciones Next.js. Si no tenías una configuración personalizada de webpack, tu aplicación ya está usando webpack 5. Si tienes una configuración personalizada, puedes consultar la documentación de webpack 5 en Next.js para obtener orientación sobre la actualización.

Limpieza de distDir ahora es predeterminada

El directorio de salida de compilación (predeterminado a .next) ahora se limpia automáticamente excepto por las cachés de Next.js. Puedes consultar el RFC sobre la limpieza de distDir para más información.

Si tu aplicación dependía de este comportamiento anteriormente, puedes desactivar el nuevo comportamiento predeterminado añadiendo la bandera cleanDistDir: false en next.config.js.

Soporte para PORT en next dev y next start

Next.js 11 soporta la variable de entorno PORT para establecer el puerto en el que se ejecuta la aplicación. Todavía se recomienda usar -p/--port, pero si tenías alguna restricción para usar -p, ahora puedes usar PORT como alternativa:

Ejemplo:

PORT=4000 next start

Personalización de next.config.js para importar imágenes

Next.js 11 soporta importaciones estáticas de imágenes con next/image. Esta nueva característica depende de la capacidad de procesar importaciones de imágenes. Si anteriormente añadiste los paquetes next-images o next-optimized-images, puedes migrar al soporte integrado usando next/image o desactivar la característica:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Eliminar super.componentDidCatch() de pages/_app.js

El método componentDidCatch de next/app fue marcado como obsoleto en Next.js 9 ya que ya no era necesario y desde entonces no tenía efecto. En Next.js 11, fue eliminado.

Si tu pages/_app.js tiene un método personalizado componentDidCatch, puedes eliminar super.componentDidCatch ya que ya no es necesario.

Eliminar Container de pages/_app.js

Esta exportación fue marcada como obsoleta en Next.js 9 ya que ya no era necesaria y desde entonces no tenía efecto, mostrando solo una advertencia durante el desarrollo. En Next.js 11 fue eliminada.

Si tu pages/_app.js importa Container desde next/app, puedes eliminarlo ya que fue removido. Más información en la documentación.

Eliminar el uso de props.url en componentes de página

Esta propiedad fue marcada como obsoleta en Next.js 4 y desde entonces mostraba una advertencia durante el desarrollo. Con la introducción de getStaticProps / getServerSideProps, estos métodos ya no permitían el uso de props.url. En Next.js 11, fue eliminada completamente.

Puedes obtener más información en la documentación.

Eliminar la propiedad unsized en next/image

La propiedad unsized en next/image fue marcada como obsoleta en Next.js 10.0.1. Puedes usar layout="fill" en su lugar. En Next.js 11, unsized fue eliminada.

Eliminar la propiedad modules en next/dynamic

Las opciones modules y render para next/dynamic fueron marcadas como obsoletas en Next.js 9.5. Esto se hizo para que la API de next/dynamic fuera más similar a React.lazy. En Next.js 11, las opciones modules y render fueron eliminadas.

Esta opción no se mencionaba en la documentación desde Next.js 8, por lo que es poco probable que tu aplicación la esté usando.

Si tu aplicación usa modules y render, puedes consultar la documentación.

Eliminar Head.rewind

Head.rewind no tenía efecto desde Next.js 9.5, y en Next.js 11 fue eliminado. Puedes eliminar con seguridad cualquier uso de Head.rewind.

Locales de Moment.js excluidos por defecto

Moment.js incluye traducciones para muchos idiomas por defecto. Next.js ahora excluye automáticamente estos idiomas por defecto para optimizar el tamaño del paquete en aplicaciones que usan Moment.js.

Para cargar un idioma específico, usa este fragmento:

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

Puedes optar por no usar este nuevo comportamiento predeterminado añadiendo excludeDefaultMomentLocales: false a next.config.js, aunque se recomienda encarecidamente no desactivar esta optimización ya que reduce significativamente el tamaño de Moment.js.

Actualizar el uso de router.events

En caso de que accedas a router.events durante el renderizado, en Next.js 11 router.events ya no está disponible durante la pre-renderización. Asegúrate de acceder a router.events en useEffect:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `La aplicación está cambiando a ${url} ${
        shallow ? 'con' : 'sin'
      } enrutamiento superficial`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // Si el componente se desmonta, cancela la suscripción
  // al evento con el método 'off':
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Si tu aplicación usa router.router.events, que era una propiedad interna no pública, asegúrate de usar router.events en su lugar.

React 16 a 17

React 17 introdujo una nueva Transformación JSX que lleva una característica de larga data de Next.js a todo el ecosistema React: No es necesario import React from 'react' cuando se usa JSX. Al usar React 17, Next.js usará automáticamente la nueva transformación. Esta transformación no hace que la variable React sea global, lo cual era un efecto secundario no intencional de la implementación anterior de Next.js. Hay disponible un codemod para corregir automáticamente los casos en los que accidentalmente usaste React sin importarlo.

La mayoría de las aplicaciones ya usan la última versión de React. Con Next.js 11, la versión mínima de React se ha actualizado a 17.0.2.

Para actualizar, puedes ejecutar el siguiente comando:

npm install react@latest react-dom@latest

O usando yarn:

yarn add react@latest react-dom@latest