Next JS s’améliore et facilite la collaboration

Mardi 15 Juin 2021, Vercel a dévoilé la version 11 du framework Next.js. Cette nouvelle version apporte des optimisations sur le plan des performances mais facilite également la collaboration entre développeurs et entre les différents partis prenants du projet.

Depuis que j’ai découvert Next.js dans les résultats du classement State of JS de 2019, ce framework est devenu mon outil de prédilection pour le développement Frontend.

Mardi 15 Juin, Vercel, la société créatrice du framework Next.js, a annoncé l’arrivée de la version 11 de Next.js.

Sans plus attendre, voici ce que cette mise à jour embarque:

Conformance: l’outil de Google à destination des frameworks frontend

Avec l’expérience qu’a cumulée Google dans le développement d’application à très fort volume de trafic, tels que Search, Maps, Photos et bien d’autres, il était important d’encadrer le code produit par les développeurs afin que chaque ajout ne vienne pas pénaliser l’expérience utilisateur.

C’est pourquoi ils ont créé la méthodologie Conformance avant de la publier en open source.

Conformance assure que les développeurs maintiennent leur code suivant des standards afin de pouvoir développer simultanément et plus rapidement de nouvelles fonctionnalités.

Conformance se base sur 3 valeurs qui sont:

• « Strong Defaults » pour les polices, le CSS, le code JS et les images. Par exemple, Conformance facilite la capacité à définir le CSS critique et affecter une priorité aux images importantes afin d’aider les navigateurs à savoir quel partie charger en premier, le tout dans le but de fournir une bonne expérience utilisateur.
• « Actionable rules » a pour but de repousser tout un tas de décisions plus ou moins triviales qu’un développeur doit faire au moment où il code en proposant des composants ayant des comportements par défaut.
• « Authoring times » est le principe selon lequel le meilleur moment pour intervenir sur un problème dans le code est au moment où celui-ci est écrit. Ce principe incite les frameworks à faire appliquer des règles spécifiques dans un linter.

Gain de performances au lancement

Pour Guillermo Rauch, fondateur de Next.js et Vercel, l’expérience développeur (DX) est un élément très important. C’est pourquoi ils ont travaillé à l’amélioration des performances de Next.js, aussi bien au rafraîchissement des pages lorsque celles-ci sont modifiées, qu’au lancement d’une nouvelle application Next.js.

Depuis la version 10, Next.js a vu un temps de lancement amélioré de 24% et un temps de traitement des changements au code réduit de 40%.

Introduction de la balise Script

Jusqu’ici, Next.JS ne gérait pas l’introduciton des balises <script> dans ses pages. Il fallait alors utiliser les balises html classiques en utilisant les propriétés React telles que dangerouslySetInnerHTML.

Avec la version 11, Next.js permet d’importer un script à une page ou à un composant et de définir une strategie de chargement. Il existe 3 stratégies au lancement de la version 11:

• beforeInteractive: qui permet de charger les scripts critiques au bon fonctionnement de votre site, notamment les scripts d’authentification, de détection de bot, de gestion de consentement. Ils sont injectés dans le HTML initial depuis le serveur.
• afterInteractive: qui est la stratégie par défaut (souvenez-vous les règles de Conformance), qui chargera ces scripts après que la page soit devenue interactive. Vous utiliserez cette stratégie pour les scripts d’analytics ou de tag managers.
• lazyOnload: sont destinés aux scripts qui n’ont pas un timing critique et qui peuvent être chargés une fois que les scripts déclarés en afterInteractive ne soit chargés. C’est le cas pour les produits de chat, de support client, etc.

import Script from 'next/script'<Script  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"  strategy="beforeInteractive" // lazyOnload, afterInteractive/>

Il est également possible d’exécuter du code une fois qu’un script spécifique a terminé son chargement:

<Script  src={url} // consent mangagement  strategy="beforeInteractive"  onLoad={() => {    // If loaded successfully, then you can load other scripts in sequence  }}/>

Avec l’implémentation de cette balise next/script, le fonctionnement de la balise native <script> change de comportement. Next.js a modifié le chargement par défaut des scripts à defer car ces derniers avaient tendance à entrer en concurrence avec des ressources essentielles au bon chargement de la page tels que du CSS, des images ou une police.

En respectant les principes de Conformance, l’équipe de Next.js propose aux développeurs une stratégie de chargement par défaut qui est à afterInteractive, tout en laissant la possibilité de prioriser en beforeInteractive si le besoin se fait sentir.

Amélioration de la balise Image

Dans cette nouvelle amélioration, la balise Image de Next.js peut définir automatiquement la height et le width de votre image pour les images statiques dans votre repository.

import Image from 'next/image'import author from '../public/me.png'export default function Home() {  return (    // When importing the image as the source, you    // don't need to define `width` and `height`.    <Image src={author} alt="Picture of the author" />  )}

Il rend également possible le fait de servir une image floutée au chargement afin d’améliorer l’expérience utilisateur et les performances évaluées par Google PageSpeed.

<Image src={author} alt="Picture of the author" placeholder="blur" />

Si vous utilisez des images hébergées en ligne, via votre CMS ou un hébergeur d’images avec CDN tel que cloudinary, vous pouvez également utiliser l’effet de floutage proposé par celui-ci en ajoutant la propriété blurDataURL.

Webpack 5 par défaut

Webpack 5 a été ajouté depuis la version 10.2 en option configurable sur le fichier next.config.js. Avec la version 11, NextJS fait de Webpack 5 son module bundler par défaut.

De la collaboration avec Next Live

Enfin, toujours dans un souci d’améliorer l’expérience développeur, Next.js a ajouté la fonction live.

Grâce à l’utilisation de technologies modernes tels que les Service Workers et WebAssembly, NextJS est capable de faire fonctionner tout le processus de développement dans un navigateur, rendant possible la collaboration instantanée entre développeurs et autres acteurs du projet et sans nécessiter un build à chaque fois qu’une modification est effectuée.