Maintenant que nous avons toutes les pages requises, explorons comment les utilisateurs peuvent naviguer entre elles. Traditionnellement, nous pourrions utiliser la balise HTML <a> par défaut. Cependant, le problème avec cette approche est qu'elle déclenche un rechargement complet de la page, impactant l'expérience utilisateur.

Next.js propose d'utiliser le composant <Link>, nous permettant de faciliter la navigation côté client.

Retour au projet

Pour implémenter la navigation côté client, accédez à app/ui/dashboard/nav-links.tsx, importez le composant Link de next/link, et remplacez la balise <a> par <Link>.

Après avoir enregistré vos modifications, testez votre localhost pour activer une navigation fluide entre les pages sans rafraîchir la page.

En Pratique