Versión 11

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

Terminal

npm install next@11

yarn add next@11

Webpack 5

Webpack 5 es ahora el predeterminado para todas las aplicaciones de Next.js. Si no tenía una configuración personalizada de webpack, su aplicación ya está usando webpack 5. Si tiene una configuración personalizada de webpack, puede 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 por defecto, excepto por las cachés de Next.js. Puede consultar el RFC de limpieza de distDir para obtener más información.

Si su aplicación dependía de este comportamiento anteriormente, puede deshabilitar el nuevo comportamiento predeterminado agregando la bandera cleanDistDir: false en next.config.js.

`PORT` ahora es compatible con `next dev` y `next start`

Next.js 11 admite 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ía alguna restricción para usar -p, ahora puede usar PORT como alternativa:

Ejemplo:

PORT=4000 next start

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

Next.js 11 admite 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 agregó los paquetes next-images o next-optimized-images, puede migrar al nuevo soporte integrado usando next/image o deshabilitar la característica:

next.config.js

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

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

El método componentDidCatch de next/app fue obsoleto en Next.js 9 ya que ya no es necesario y desde entonces no tiene efecto. En Next.js 11, fue eliminado.

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

Eliminar `Container` de `pages/_app.js`

Esta exportación fue obsoleta en Next.js 9 ya que ya no es necesaria y desde entonces no tiene efecto, mostrando una advertencia durante el desarrollo. En Next.js 11 fue eliminada.

Si su pages/_app.js importa Container desde next/app, puede eliminarlo ya que fue removido. Aprenda más en la documentación.

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

Esta propiedad fue 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.

Puede aprender más en la documentación.

Eliminar la propiedad `unsized` en `next/image`

La propiedad unsized en next/image fue obsoleta en Next.js 10.0.1. Puede 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 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 su aplicación la esté usando.

Si su aplicación usa modules y render, puede consultar la documentación.

Eliminar `Head.rewind`

Head.rewind no ha tenido efecto desde Next.js 9.5, en Next.js 11 fue eliminado. Puede eliminar de forma segura su uso de Head.rewind.

Locales de Moment.js excluidos por defecto

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

Para cargar un locale específico, use este fragmento:

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

moment.locale('ja')

Puede optar por no usar este nuevo comportamiento predeterminado agregando excludeDefaultMomentLocales: false a next.config.js si no desea el nuevo comportamiento, pero tenga en cuenta que se recomienda encarecidamente no deshabilitar esta optimización ya que reduce significativamente el tamaño de Moment.js.

Actualizar el uso de `router.events`

En caso de que esté accediendo a router.events durante el renderizado, en Next.js 11 router.events ya no se proporciona durante la pre-renderización. Asegúrese 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
  // del evento con el método 'off':
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Si su aplicación usa router.router.events, que era una propiedad interna no pública, asegúrese de usar router.events también.

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 tener que hacer import React from 'react' cuando se usa JSX. Cuando se usa 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 un codemod disponible para corregir automáticamente los casos en los que accidentalmente usó 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, puede ejecutar el siguiente comando:

npm install react@latest react-dom@latest

O usando yarn:

yarn add react@latest react-dom@latest

On this page