Общая навигация

Часть раздела Основы Next.js путешествия по React на Coddy — урок 12 из 47.

Панель навигации — это классический элемент для размещения в макете (`layout`): пишется один раз, присутствует на каждом маршруте и никогда не монтируется повторно.

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

Обратите внимание, где находится {children}: после nav. Всё, что вы поместите перед ним, появится над страницей, а всё, что после — под ней. layout — это просто JSX. Единственное правило — {children} должен где-то присутствовать.

Теперь layout — это ваш файл, а не заблокированный. Добавьте nav, а затем наблюдайте, как он остается на месте по мере изменения страницы под ним.

Задание

Легко

Добавьте навигационную панель (nav bar) для Coddy Eats, которая будет отображаться на каждой странице.

В файле app/layout.jsx, внутри <body> и выше {children}, добавьте:

Тег <nav> с id="nav"
Внутри него, <Link> на / с id="home-link" и текстом Home
И <Link> на /menu с id="menu-link" и текстом Menu

Страницы заблокированы: вы изменяете только layout. Тесты перейдут на /menu после этого и проверят, что навигационная панель все еще находится на экране.

Попробуйте сами

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