O Link Ativo

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 34 de 47.

Todo site com uma barra de navegação destaca o link em que você está atualmente. Para fazer isso, um componente precisa saber uma coisa que o servidor não pode dizer a ele após o fato: qual URL está na tela neste exato momento.

O next/navigation entrega isso a você:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // em /about, pathname é a string '/about'
}

É um hook, então as regras que você já conhece se aplicam: ele só funciona em um componente cujo arquivo começa com 'use client'. Esse é todo o motivo pelo qual uma barra de navegação geralmente é um dos poucos componentes client em um aplicativo renderizado no servidor: ele precisa ser executado novamente a cada mudança de rota.

A partir daí, é uma comparação simples:

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

Note onde a navegação fica: no layout. Ela é renderizada uma vez e sobrevive a cada navegação, portanto a mudança de pathname é o que a renderiza novamente, não um recarregamento.

Desafio

Fácil

A barra de navegação funciona, mas nada mostra em qual página você está. Corrija isso em components/Nav.jsx.

Chame usePathname() e armazene em pathname.
Dê a cada link o className "nav-link active" quando seu href corresponder a pathname, e apenas "nav-link" caso contrário.

O link Home aponta para /, o link Menu para /menu.

Experimente você mesmo

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>
    );
}