Optimisation de la Navigation
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
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.08Optimisation de la Navigation
Glissez pour afficher le menu
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
Merci pour vos commentaires !
