Cómo actualizar a la versión 12

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

npm i next@12 react@17 react-dom@17 eslint-config-next@12

yarn add next@12 react@17 react-dom@17 eslint-config-next@12

pnpm up next@12 react@17 react-dom@17 eslint-config-next@12

bun add next@12 react@17 react-dom@17 eslint-config-next@12

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

Actualización a 12.2

Middleware - Si estaba utilizando Middleware antes de 12.2, consulte la guía de actualización para obtener más información.

Actualización a 12.0

Versión mínima de Node.js - La versión mínima de Node.js ha aumentado de 12.0.0 a 12.22.0, que es la primera versión de Node.js con soporte nativo para ES Modules.

Versión mínima de React - La versión mínima requerida de React es 17.0.2. Para actualizar, puede ejecutar el siguiente comando en la terminal:

npm install react@latest react-dom@latest

yarn add react@latest react-dom@latest

pnpm update react@latest react-dom@latest

bun add react@latest react-dom@latest

SWC reemplaza a Babel

Next.js ahora utiliza el compilador basado en Rust SWC para compilar JavaScript/TypeScript. Este nuevo compilador es hasta 17 veces más rápido que Babel al compilar archivos individuales y hasta 5 veces más rápido en Fast Refresh.

Next.js proporciona compatibilidad total con versiones anteriores para aplicaciones que tienen configuración personalizada de Babel. Todas las transformaciones que Next.js maneja por defecto, como styled-jsx y el tree-shaking de getStaticProps / getStaticPaths / getServerSideProps, se han portado a Rust.

Cuando una aplicación tiene una configuración personalizada de Babel, Next.js automáticamente optará por no usar SWC para compilar JavaScript/TypeScript y volverá a usar Babel de la misma manera que se usaba en Next.js 11.

Muchas de las integraciones con bibliotecas externas que actualmente requieren transformaciones personalizadas de Babel se portarán a transformaciones basadas en Rust de SWC en un futuro cercano. Estas incluyen, pero no se limitan a:

• Styled Components
• Emotion
• Relay

Para priorizar transformaciones que le ayuden a adoptar SWC, por favor comparta su .babelrc en este hilo de comentarios.

SWC reemplaza a Terser para minificación

Puede optar por reemplazar Terser con SWC para minificar JavaScript hasta 7 veces más rápido usando una bandera en next.config.js:

module.exports = {
  swcMinify: true,
}

La minificación usando SWC es una bandera opcional para asegurarse de que pueda probarse en más aplicaciones Next.js del mundo real antes de convertirse en el valor predeterminado en Next.js 12.1. Si tiene comentarios sobre la minificación, por favor déjelos en este hilo de comentarios.

Mejoras en el análisis CSS de styled-jsx

Además del compilador basado en Rust, hemos implementado un nuevo analizador CSS basado en el utilizado para la transformación Babel de styled-jsx. Este nuevo analizador tiene un manejo mejorado del CSS y ahora muestra errores cuando se usa CSS no válido que antes pasaba desapercibido y causaba comportamientos inesperados.

Debido a este cambio, el CSS no válido generará un error durante el desarrollo y next build. Este cambio solo afecta al uso de styled-jsx.

next/image cambió el elemento envolvente

next/image ahora renderiza el <img> dentro de un <span> en lugar de un <div>.

Si su aplicación tiene CSS específico dirigido a span como .container span, actualizar a Next.js 12 podría coincidir incorrectamente con el elemento envolvente dentro del componente <Image>. Puede evitar esto restringiendo el selector a una clase específica como .container span.item y actualizando el componente relevante con esa className, como <span className="item" />.

Si su aplicación tiene CSS específico dirigido a la etiqueta <div> de next/image, por ejemplo .container div, puede que ya no coincida. Puede actualizar el selector a .container span, o preferiblemente, agregar un nuevo <div className="wrapper"> envolviendo el componente <Image> y dirigirse a ese, como .container .wrapper.

La prop className no ha cambiado y seguirá pasándose al elemento <img> subyacente.

Consulte la documentación para más información.

La conexión HMR ahora usa WebSocket

Anteriormente, Next.js usaba una conexión server-sent events para recibir eventos HMR. Next.js 12 ahora usa una conexión WebSocket.

En algunos casos, al redirigir solicitudes al servidor de desarrollo de Next.js, deberá asegurarse de que la solicitud de actualización se maneje correctamente. Por ejemplo, en nginx necesitaría agregar la siguiente configuración:

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Si está utilizando Apache (2.x), puede agregar la siguiente configuración para habilitar web sockets en el servidor. Revise el puerto, nombre de host y nombres de servidor.

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 usa websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

Para servidores personalizados, como express, puede necesitar usar app.all para asegurarse de que la solicitud se pase correctamente, por ejemplo:

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Se ha eliminado el soporte para Webpack 4

Si ya está utilizando webpack 5, puede omitir esta sección.

Next.js adoptó webpack 5 como predeterminado para la compilación en Next.js 11. Como se comunicó en la documentación de actualización a webpack 5, Next.js 12 elimina el soporte para webpack 4.

Si su aplicación todavía está usando webpack 4 con la bandera de exclusión, ahora verá un error que enlaza a la documentación de actualización a webpack 5.

Opción target obsoleta

Si no tiene target en next.config.js, puede omitir esta sección.

La opción target ha quedado obsoleta en favor del soporte integrado para rastrear qué dependencias son necesarias para ejecutar una página.

Durante next build, Next.js rastreará automáticamente cada página y sus dependencias para determinar todos los archivos necesarios para implementar una versión de producción de su aplicación.

Si actualmente está utilizando la opción target configurada como serverless, lea la documentación sobre cómo aprovechar el nuevo output.