Version 12

Pour effectuer la mise à niveau vers la version 12, exécutez la commande suivante :

Terminal

npm install next@12

yarn add next@12

pnpm update next@12

bun add next@12

Mise à niveau vers la version 12.2

Middleware - Si vous utilisiez le Middleware avant la version 12.2, consultez le guide de mise à niveau pour plus d'informations.

Mise à niveau vers la version 12.0

Version minimale de Node.js - La version minimale de Node.js est passée de 12.0.0 à 12.22.0, qui est la première version de Node.js avec support natif des modules ES.

Version minimale de React - La version minimale requise de React est 17.0.2. Pour effectuer la mise à niveau, vous pouvez exécuter la commande suivante dans le terminal :

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

Remplacement de Babel par SWC

Next.js utilise désormais le compilateur basé sur Rust SWC pour compiler JavaScript/TypeScript. Ce nouveau compilateur est jusqu'à 17x plus rapide que Babel pour la compilation de fichiers individuels et jusqu'à 5x plus rapide pour le Fast Refresh.

Next.js assure une compatibilité descendante complète avec les applications ayant une configuration Babel personnalisée. Toutes les transformations gérées par défaut par Next.js comme styled-jsx et l'élimination du code mort (tree-shaking) pour getStaticProps / getStaticPaths / getServerSideProps ont été portées vers Rust.

Lorsqu'une application possède une configuration Babel personnalisée, Next.js désactivera automatiquement l'utilisation de SWC pour la compilation JavaScript/TypeScript et reviendra à l'utilisation de Babel comme dans Next.js 11.

De nombreuses intégrations avec des bibliothèques externes qui nécessitent actuellement des transformations Babel personnalisées seront portées vers des transformations SWC basées sur Rust dans un futur proche. Cela inclut notamment :

Styled Components
Emotion
Relay

Pour prioriser les transformations qui vous aideront à adopter SWC, merci de partager votre fichier .babelrc sur ce fil de discussion.

Remplacement de Terser par SWC pour la minification

Vous pouvez activer le remplacement de Terser par SWC pour une minification JavaScript jusqu'à 7x plus rapide en utilisant un flag dans next.config.js :

next.config.js

module.exports = {
  swcMinify: true,
}

La minification avec SWC est un flag optionnel pour permettre des tests sur davantage d'applications Next.js réelles avant qu'elle ne devienne la valeur par défaut dans Next.js 12.1. Si vous avez des retours sur la minification, merci de les partager sur ce fil de discussion.

Améliorations du parsing CSS pour styled-jsx

En plus du compilateur basé sur Rust, nous avons implémenté un nouveau parseur CSS basé sur celui utilisé pour la transformation Babel de styled-jsx. Ce nouveau parseur gère mieux le CSS et signale désormais les erreurs pour du CSS invalide qui passait auparavant inaperçu et causait des comportements inattendus.

En raison de ce changement, le CSS invalide générera une erreur pendant le développement et lors de next build. Ce changement affecte uniquement l'utilisation de styled-jsx.

Modification de l'élément wrapper pour `next/image`

next/image rend désormais le <img> dans un <span> au lieu d'un <div>.

Si votre application a du CSS ciblant spécifiquement les span comme .container span, la mise à niveau vers Next.js 12 pourrait correspondre incorrectement à l'élément wrapper dans le composant <Image>. Vous pouvez éviter cela en limitant le sélecteur à une classe spécifique comme .container span.item et en mettant à jour le composant concerné avec cette className, par exemple <span className="item" />.

Si votre application a du CSS ciblant spécifiquement la balise <div> de next/image, par exemple .container div, cela pourrait ne plus correspondre. Vous pouvez mettre à jour le sélecteur en .container span, ou mieux, ajouter un nouveau <div className="wrapper"> englobant le composant <Image> et le cibler comme .container .wrapper.

La prop className reste inchangée et sera toujours transmise à l'élément <img> sous-jacent.

Consultez la documentation pour plus d'informations.

La connexion HMR utilise désormais un WebSocket

Précédemment, Next.js utilisait une connexion server-sent events pour recevoir les événements HMR. Next.js 12 utilise désormais une connexion WebSocket.

Dans certains cas lors du proxy des requêtes vers le serveur de développement Next.js, vous devrez vous assurer que la requête d'upgrade est gérée correctement. Par exemple, dans nginx vous devrez ajouter la configuration suivante :

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 vous utilisez Apache (2.x), vous pouvez ajouter la configuration suivante pour activer les web sockets sur le serveur. Vérifiez le port, le nom d'hôte et les noms de serveur.

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 utilise les websockets
 <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>

Pour les serveurs personnalisés comme express, vous devrez peut-être utiliser app.all pour vous assurer que la requête est transmise correctement, par exemple :

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

Le support de Webpack 4 a été supprimé

Si vous utilisez déjà webpack 5, vous pouvez ignorer cette section.

Next.js a adopté webpack 5 comme valeur par défaut pour la compilation dans Next.js 11. Comme indiqué dans la documentation de mise à niveau de webpack 5, Next.js 12 supprime le support de webpack 4.

Si votre application utilise toujours webpack 4 avec le flag d'opt-out, vous verrez désormais une erreur pointant vers la documentation de mise à niveau de webpack 5.

L'option `target` est dépréciée

Si vous n'avez pas target dans next.config.js, vous pouvez ignorer cette section.

L'option target a été dépréciée au profit d'un support intégré pour tracer les dépendances nécessaires à l'exécution d'une page.

Pendant next build, Next.js tracera automatiquement chaque page et ses dépendances pour déterminer tous les fichiers nécessaires au déploiement d'une version de production de votre application.

Si vous utilisez actuellement l'option target définie sur serverless, consultez la documentation sur comment utiliser la nouvelle sortie.

On this page