Navegación compartida

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

Una barra de navegación es el elemento clásico para colocar en un layout: se escribe una vez, está presente en cada ruta y nunca se vuelve a montar.

// app/layout.jsx
import Link from 'next/link';

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

Observa dónde se ubica {children}: después del nav. Cualquier cosa que coloques antes aparecerá arriba de la página, cualquier cosa después aparecerá abajo. El layout es simplemente JSX. La única regla es que {children} tiene que estar en alguna parte.

Ahora el layout es tu archivo, no uno bloqueado. Añade el nav, después observa cómo permanece en su lugar mientras la página cambia debajo de él.

Desafío

Fácil

Dale a Coddy Eats una barra de navegación que aparezca en cada página.

En app/layout.jsx, dentro de <body> y arriba de {children}, añade:

Un <nav> con id="nav"
Dentro de él, un <Link> a / con id="home-link" y el texto Home
Y un <Link> a /menu con id="menu-link" y el texto Menu

Las páginas están bloqueadas: solo modificarás el layout. Las pruebas visitarán /menu después y verificarán que la barra de navegación siga en pantalla.

Pruébalo tú mismo

import './globals.css';
import Link from 'next/link';

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

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