Contenu du cours
Next.js 14
Next.js 14
Création de Liens Actifs
En développement web, une pratique courante consiste à mettre en évidence les liens actifs en fonction de la page actuelle.
Dans Next.js, nous pouvons réaliser cela en utilisant le hook usePathname()
. Ce hook vérifie le chemin actuel dans l'application, nous permettant de mettre en œuvre une mise en évidence dynamique pour la page correspondante avec la bibliothèque clsx
.
Retour au projet
Pour utiliser le hook usePathname()
, convertissez nav-links.tsx
en un composant client. Commencez par ajouter la directive "use client"
en haut du fichier.
Maintenant, nous pouvons utiliser le hook usePathname
et l'utiliser.
Enfin, utilisez la bibliothèque clsx
pour appliquer des styles de manière conditionnelle. Définissez la condition de sorte que si le pathname
est égal à link.href
, changez la couleur de fond en bg-neutral-600
.
En Pratique
Merci pour vos commentaires !