Décryptage du fonctionnement des composants Image & Link de NextJS

NextJS est un framework ReactJS très actif, connu pour créer divers sites/applications web. Par exemple, l’interface de ChatGPT fonctionne avec NextJS.

NextJS possède des composants permettant aux développeurs⸱ses d’éviter de réinventer la roue sur des fonctionnalités stratégiques et communes à de nombreux services numériques.

Voici deux composants performants du framework à connaître :

Image : pour l’affichage des images de manière légère, optimisées pour les navigateurs et facilement référençables par les robots SEO.

Link : permet de lier des pages web entre elles de manière fluide.

Comme d’autres composants, ils ont évolué au fur et à mesure des versions de NextJS. Image a par exemple eu des breaks changes (changements bloquants) importants.

Pour parer à cette problématique, les équipes de NextJS ont créé un nouveau composant de transition avant de renommer l’ancien en next/legacy/image.

Même chose pour Link, qui a connu des changements moins conséquents mais ayant tout de même impacté de nombreux projets. Ces modifications ont permis aux composants de devenir plus légers, performants et de générer un code HTML plus propre.

Fort de cette expérience, il est plutôt recommandé de créer son propre composant d’image et de lien. A l’intérieur de ses composants personnalisés, il suffit d’appeler next/image et next/link.

L’avantage : si de nouveau breaks changes surviennent, la migration sera plus douce - sauf si, malheureusement, il faut ajouter d’autres paramètres (ce qui n’est pas arrivé pour le moment).

Voici un exemple de code tout simple pour illustrer les propos précédents :

const ImgBasic = ({img, alt} : {img: StaticImport, alt: string}) => {
return <Image src={img} alt={alt} />
}