Navigation côté client
Le composant Link permet une navigation côté client entre deux pages d'une même application Next.js.
La navigation côté client signifie que la transition entre les pages se fait via JavaScript, ce qui est plus rapide que la navigation par défaut effectuée par le navigateur.
Voici une manière simple de le vérifier :
- Utilisez les outils de développement du navigateur pour modifier la propriété CSS
backgroundde<html>enyellow. - Cliquez sur les liens pour naviguer entre les deux pages.
- Vous remarquerez que le fond jaune persiste entre les transitions de page.
Cela montre que le navigateur ne charge pas la page entière et que la navigation côté client fonctionne.
Si vous aviez utilisé <a href="…"> au lieu de <Link href="…"> et effectué cette manipulation, la couleur de fond serait réinitialisée lors des clics sur les liens car le navigateur effectue un rechargement complet.
Découpage du code et préchargement
Next.js effectue automatiquement le découpage du code (code splitting), de sorte que chaque page ne charge que ce qui lui est nécessaire. Cela signifie que lorsque la page d'accueil est rendue, le code des autres pages n'est pas servi initialement.
Cela garantit que la page d'accueil se charge rapidement, même si vous avez des centaines de pages.
Le chargement uniquement du code de la page demandée signifie également que les pages sont isolées. Si une page spécifique génère une erreur, le reste de l'application continuera à fonctionner.
De plus, dans une version de production de Next.js, dès que des composants Link apparaissent dans la zone visible du navigateur, Next.js précharge automatiquement le code de la page liée en arrière-plan. Au moment où vous cliquez sur le lien, le code de la page de destination sera déjà chargé en arrière-plan, et la transition entre les pages sera quasi instantanée !
Résumé
Next.js optimise automatiquement votre application pour les meilleures performances grâce au découpage du code, à la navigation côté client et au préchargement (en production).
Vous créez des routes sous forme de fichiers dans le dossier pages et utilisez le composant intégré Link. Aucune bibliothèque de routage n'est nécessaire.
Vous pouvez en apprendre davantage sur le composant Link dans la référence API de next/link et sur le routage en général dans la documentation sur le routage.
Remarque : Si vous devez créer un lien vers une page externe à l'application Next.js, utilisez simplement une balise
<a>sansLink.