Comment effectuer la mise à niveau vers la version 12

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

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

Bon à savoir : Si vous utilisez TypeScript, assurez-vous également de mettre à niveau @types/react et @types/react-dom vers leurs versions correspondantes.

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 prise en charge native 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 :

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'à 17 fois plus rapide que Babel pour la compilation de fichiers individuels et jusqu'à 5 fois 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 que Next.js gère par défaut, comme styled-jsx et l'élimination des branches mortes (tree-shaking) de 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 de 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, sans s'y limiter :

• Styled Components
• Emotion
• Relay

Pour prioriser les transformations qui vous aideront à adopter SWC, veuillez 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'à 7 fois plus rapide en utilisant un flag dans 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, veuillez les partager sur ce fil de discussion.

Améliorations de l'analyse CSS pour styled-jsx

En plus du compilateur basé sur Rust, nous avons implémenté un nouvel analyseur CSS basé sur celui utilisé pour la transformation Babel de styled-jsx. Ce nouvel analyseur gère mieux le CSS et signale désormais les erreurs lorsque du CSS invalide est utilisé, ce 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 n'affecte que l'utilisation de styled-jsx.

Modification de l'élément d'encapsulation pour next/image

next/image rend désormais la balise <img> à l'intérieur d'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 d'encapsulation à l'intérieur du composant <Image>. Vous pouvez éviter cela en restreignant 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 fonctionner. Vous pouvez mettre à jour le sélecteur en .container span, ou mieux, ajouter un nouveau <div className="wrapper"> encapsulant 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

Auparavant, 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)
})

La prise en charge de Webpack 4 a été supprimée

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 la prise en charge de webpack 4.

Si votre application utilise toujours webpack 4 avec le flag de désactivation, vous verrez désormais une erreur renvoyant vers la documentation de mise à niveau de webpack 5.

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

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

L'option target a été dépréciée au profit d'une prise en charge intégrée du traçage des 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 la manière d'utiliser la nouvelle sortie.