Navegação Compartilhada

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

Uma barra de navegação é o item clássico para se colocar em um layout: escrita uma única vez, presente em todas as rotas e nunca remontada.

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

Observe onde {children} fica: depois do nav. Qualquer coisa que você colocar antes dele aparece acima da página, qualquer coisa depois aparece abaixo. O layout é apenas JSX. A única regra é que {children} tem que estar lá em algum lugar.

Agora o layout é seu arquivo, não um arquivo bloqueado. Adicione a nav, e depois veja-a permanecer no lugar enquanto a página muda abaixo dela.

Desafio

Fácil

Dê ao Coddy Eats uma barra de navegação que esteja presente em todas as páginas.

Em app/layout.jsx, dentro de <body> e acima de {children}, adicione:

Um <nav> com id="nav"
Dentro dele, um <Link> para / com id="home-link" e o texto Home
E um <Link> para /menu com id="menu-link" e o texto Menu

As páginas estão bloqueadas: você só altera o layout. Os testes visitam /menu depois e verificam se a nav ainda está na tela.

Experimente você mesmo

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