Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Création de Liens Actifs | Pages et Mises en Page
Next.js 14
course content

Contenu du cours

Next.js 14

Next.js 14

1. Introduction
2. Concepts de Base
3. Pages et Mises en Page
4. Déploiement et Base de Données
5. Travailler avec les Données
6. Fonctionnalités Avancées
7. Authentification

book
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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5
We're sorry to hear that something went wrong. What happened?
some-alt