Versión 12

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

npm install next@12

yarn add next@12

pnpm update next@12

bun add next@12

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 cambiado de 12.0.0 a 12.22.0, que es la primera versión de Node.js con soporte nativo para Módulos ES.

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 la eliminación de código muerto (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 (SWC) en un futuro cercano. Estas incluyen, pero no se limitan a:

• Styled Components
• Emotion
• Relay

Para priorizar las transformaciones que le ayudarán a adoptar SWC, por favor comparta su .babelrc en este hilo de feedback.

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 asegurar que pueda ser probada en más aplicaciones Next.js del mundo real antes de convertirse en el valor por defecto en Next.js 12.1. Si tiene comentarios sobre la minificación, por favor déjelos en este hilo de feedback.

Mejoras en el análisis de CSS de styled-jsx

Además del compilador basado en Rust, hemos implementado un nuevo analizador de 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 inválido que antes pasaba desapercibido y causaba comportamientos inesperados.

Debido a este cambio, el CSS invá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 que apunta 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 que apunta 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 apuntar 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, cuando se redirigen 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á usando 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 asegurar que la solicitud se pase correctamente, por ejemplo:

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

Se eliminó el soporte para Webpack 4

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

Next.js adoptó webpack 5 como valor por defecto 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 mediante 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 se necesitan 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á usando la opción target configurada como serverless, por favor lea la documentación sobre cómo aprovechar el nuevo output.