Le lien actif

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 34 sur 47.

Chaque site doté d'une barre de navigation met en évidence le lien sur lequel vous vous trouvez actuellement. Pour ce faire, un composant doit savoir une chose que le serveur ne peut pas lui indiquer après coup : quelle URL est actuellement affichée à l'écran.

next/navigation vous le fournit :

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // sur /about, pathname est la chaîne '/about'
}

C'est un hook, donc les règles que vous connaissez déjà s'appliquent : il ne fonctionne que dans un composant dont le fichier commence par 'use client'. C'est la raison principale pour laquelle une barre de navigation est généralement l'un des rares client components dans une application par ailleurs rendue côté serveur : elle doit s'exécuter à nouveau à chaque changement de route.

À partir de là, il s'agit d'une simple comparaison :

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

Notez où se trouve la nav : dans le layout. Elle s'affiche une fois et survit à chaque navigation, c'est donc le changement de pathname qui la réaffichera, et non un remontage.

Défi

Facile

La barre de navigation fonctionne, mais rien n'indique sur quelle page vous vous trouvez. Corrigez cela dans components/Nav.jsx.

Appelez usePathname() et stockez-le dans pathname.
Donnez à chaque lien le className "nav-link active" lorsque son href correspond à pathname, et un simple "nav-link" sinon.

Le lien Home pointe vers /, le lien Menu vers /menu.

Essayez vous-même

import './globals.css';
import Nav from '../components/Nav.jsx';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <Nav />
                {children}
            </body>
        </html>
    );
}