How to open a link in a new Tab in NextJS?

Cet article traite d'un bug courant rencontré par les développeurs Next.js lorsqu'ils essaient d'ouvrir un lien externe dans un nouvel onglet. Le message d'erreur **ESLint** lié à l'accessibilité du lien peut poser problème. Nous expliquons pourquoi il n'est pas nécessaire d'utiliser le composant **Link** pour les liens externes et proposons une solution simple et sécurisée, tout en évitant les avertissements d'ESLint.

Code initial

Voici le code qui générait l’erreur :

<Link href="https://twitter.com/" passHref>
   <a target="_blank">
      <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
  </a>
</Link>

Bien que ce code ouvre correctement le lien dans un nouvel onglet, il déclenche un avertissement d’accessibilité d’ESLint lié à l’attribut href.

La solution : Ne pas utiliser Link pour les liens externes

Dans ce cas, comme il s’agit d’un lien externe, il n’est pas nécessaire d’utiliser le composant Link de Next.js, qui est plutôt destiné aux liens internes pour profiter du prérendu côté client.

Voici le code corrigé :

<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
  <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
</a>

Explication de la solution :

1. Lien externe sans Link : Puisque le lien est externe, il est préférable d’utiliser une balise HTML classique <a> au lieu du composant Link de Next.js.
2. rel="noopener noreferrer" : Cet attribut de sécurité est essentiel lorsqu'on utilise target="_blank", car il empêche la nouvelle page d’avoir accès à la fenêtre d’origine via window.opener. Cela protège votre site contre certaines failles de sécurité, comme les attaques de type tabnabbing.
3. Suppression de l’avertissement ESLint : En utilisant directement la balise <a> avec un href valide, vous éliminez l'avertissement d’accessibilité d’ESLint. Le lien est ainsi complètement accessible pour les utilisateurs au clavier.

Conclusion

Pour ouvrir un lien externe dans un nouvel onglet en Next.js sans déclencher d’erreur ESLint, il est recommandé d'utiliser une simple balise <a> avec les attributs target="_blank" et rel="noopener noreferrer". Cela garantit une bonne accessibilité, sécurité et un code propre.