NextJS 12: Tout savoir sur la nouvelle version

Avec l’arrivée de sa version 12 et l’implémentation des Middlewares, NextJS veut devenir le framework frontend de référence pour la conception de site web de cette décennie.

Après la mise à jour annoncée en juin dernier, Next.js et ses contributeurs sont revenus pour annoncer la nouvelle version de Next lors de la NextConf:

Des performances encore meilleures

Les builds et refresh encore plus rapides

Après avoir implémenté Webpack 5 dans sa version 11, l’équipe de Next.js investi encore plus sur l’amélioration des temps de builds et de rafraîchissement.

Le compilateur open source Speedy Web Compiler, développé en Rust, permet de créer les pages statiques au moment de la commande build environ 5x plus rapidement que dans la version 11 de Next JS. La compilation qui permet de mettre à jour une page en local lorsque le code est modifié est accélérée également puisque le rendu s’affiche environ 3x plus vite.

Aujourd’hui, la compilation utilisant SWC est 17 fois plus rapide qu’avec Babel lorsqu’il s’agit de transformer votre code TypeScript en JavaScript, ce qui est un réel gain non négligeable pour de larges projets.

Le compilateur Rust est également capable de minifier vos fichiers 7 fois plus rapidement que Terser. Cette fonctionnalité est disponible en option sur Next.js 12 en l’activant dans votre fichier de configuration next.config.js:

// next.config.jsmodule.exports = {  swcMinify: true}

NextJS a vraiment pour ambition d’être le framework React qui prendra le plus de parts de marché sur le segment site internet, là où React va traditionnellement être utilisé pour des web apps.

Pour satisfaire les besoins de gros sites ayant plusieurs milliers de pages et sur lesquels des équipes de plusieurs développeurs travaillent, réduire ce temps de build est un gain de productivité non négligeable.

Des images compressées avec AVIF

Grâce au compresseur AVIF, la balise Image de NextJS est capable de compresser vos images et réduire leurs tailles de 20% par rapport au format WebP.

Cette fonctionnalité est optionnelle et doit être activée en utilisant la propriété images.formats dans le fichier next.config.js:

module.exports = {  images: {    formats: ['image/avif', 'image/webp']  }}

À noter qu’Avif est plus lent à optimiser les images que WebP et qu’il n’est pas accessible par tous les navigateurs, ajouter le format WebP est conseillé.

Dans une configuration telle qu’illustrée ci-dessus, le navigateur va tenter de charger l’image AVIF d’abord, puis le format WebP si le format AVIF n’est pas supporté, et enfin, si aucun format optimisé est supporté, le format d’origine de l’image.

De nouvelles fonctionnalités

L’arrivée des Middlewares

Un middleware est une fonction qui se place à l’entrée et la sortie de votre serveur web, interceptant ainsi les requêtes entrantes et les réponses sortantes afin d’appliquer une logique sur ces éléments.

Dans le développement web, les middlewares sont traditionnellement utilisés pour des fonctionnalités qui sont applicables partout dans votre application, comme par exemple l’authentification, les logs, des redirections, etc.

Juqsu’à la version 12, NextJS était dépourvu d’une fonctionnalité de Middleware. Les développeurs étaient obligés de l’implémenter manuellement pour chaque route API.

Pour utiliser les middlewares dans Next.js, créez un fichier _middleware.js dans le répertoire pages:

// pages/_middleware.jsexport function middleware(req, ev) {  return new Response('Hello, world!')}

Vous trouverez plusieurs exemples de middlewares sur le repository de Vercel sur Github.

Les fonctions Edge de Vercel

C’est sûrement LA fonctionnalité la plus importante, bien qu’elle ne soit pas directement liée à Next js.

NextJS a gagné en popularité grâce à sa capacité à produire des pages statiques et également de charger des pages avec des données dynamiques, récupérées à chaque requête.

Les pages statiques, lorsqu’elles sont déployées sur Vercel ou via un autre hébergeur proposant une fonctionnalité similaire, sont mises en cache dans des Content Delivery Networks (CDN), permettant un temps de chargement le plus bas possible.

En revanche les pages dynamiques nécessitent un aller-retour entre le client et le serveur qui va héberger vos fonctions API dans NextJS. Suivant la localisation de votre serveur et sa distance par rapport aux différents internautes, les requêtes peuvent être plus ou moins longues mais indispensables pour fournir une expérience personnalisée à chaque internaute.

Grâce aux fonctions serverless de Vercel Edge, si vous avez déployé votre site Next.js chez Vercel, vous bénéficiez du nouveau réseau distribué permettant d’exécuter votre code serveur sans latence réseau et sans avoir de démarrage à froid de vos fonctions serverless (cold start), que vous auriez si vous aviez mis en place votre infrastructure de FaaS chez un fournisseur cloud AWS, GCP ou Azure.

Ainsi, Vercel se base sur l’infrastructure d’Amazon Web Services pour répliquer vos fonctions à travers différentes régions du monde.

Améliorations de l’expérience développeur (DX)

Le format ES Module

Introduit à l’essai avec la version 11.1 de Next.js, l’ES Modules en JavaScript est un nouveau standard de code JavaScript supporté par tous les navigateurs ainsi que NodeJS.

Cette migration de l’écosystème de Common JS vers ES Modules permet d’avoir des fichiers allégés et donc un meilleur chargement des pages pour les visiteurs de vos sites.

Import de librairies via URL

Disponible à l’essai, NextJS permet aux développeurs d’importer n’importe quel package depuis une URL plutôt que de devoir installer le package localement via npm.

Il est maintenant possible d’utiliser du code directement depuis un CDN et s’affranchir de l’étape de build.

En activant l’import via URL dans votre fichier next.config.js:

module.exports = {  experimental: {    urlImports: ['https://cdn.skypack.dev']  }}

vous pourrez ensuite importer des packages Javascript de cette façon:

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Comment mettre à jour Next.JS ?

Pour migrer vers la version 12 de Next.js, assurez-vous d’avoir une version de Node.js supérieure à la version 12.20. Si ce n’est pas déjà le cas, vous pourrez mettre à jour votre version de Node.js.