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 lo clásico que se coloca en un diseño: 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 encuentra {children}: después de la navegación. Todo lo que coloques antes aparece encima de la página; todo lo que coloques después aparece debajo. El diseño no es más que JSX. La única regla es que {children} tiene que estar ahí en algún lugar.

Ahora el diseño es tu archivo, no uno bloqueado. Añade la navegación y después observa cómo permanece en su sitio mientras la página cambia debajo.

Desafío

Fácil

Dale a Coddy Eats una barra de navegación que esté en todas las páginas.

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

Un <nav> con id="nav"
Dentro, 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 debes modificar el diseño. Después, las pruebas visitan /menu y comprueban que la barra de navegación siga visible.

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