El enlace activo

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 34 de 47.

Cada sitio con una barra de navegación destaca el enlace en el que te encuentras actualmente. Para hacer eso, un componente tiene que saber una cosa que el servidor no puede decirle después: qué URL está en pantalla en este momento.

next/navigation te lo facilita:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // en /about, pathname es la cadena '/about'
}

Es un hook, por lo que se aplican las reglas que ya conoces: solo funciona en un componente cuyo archivo comience con 'use client'. Esa es la razón principal por la que una barra de navegación es habitualmente uno de los pocos componentes de cliente (client) en una aplicación que de otro modo se renderiza en el servidor: tiene que volver a ejecutarse en cada cambio de ruta.

A partir de ahí, es una simple comparación:

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

Ten en cuenta dónde vive el nav: en el layout. Se renderiza una vez y sobrevive a cada navegación, por lo que el cambio de pathname es lo que hace que se vuelva a renderizar, no un desmontaje.

Desafío

Fácil

La barra de navegación funciona, pero nada muestra en qué página estás. Corrige eso en components/Nav.jsx.

Llama a usePathname() y guárdalo en pathname.
Dale a cada enlace la className "nav-link active" cuando su href coincida con pathname, y simplemente "nav-link" en caso contrario.

El enlace Home apunta a /, el enlace Menu a /menu.

Pruébalo tú mismo

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