Вложенные макеты

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

Корневой макет — не единственный. Поместите layout.jsx в любую папку, и он оборачивает маршруты этой папки, и только их.

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

Перейдите на /menu/pizza, и Next.js вложит их снаружи внутрь:

RootLayout
    MenuLayout
        PizzaPage

Перейдите по адресу /, и выполнится только корневой layout: layout для menu отсутствует в пути этого URL, поэтому он никогда не появится.

Вложенный макет пишется точно так же, как и корневой, за исключением оболочки: без <html> и без <body>. Просто компонент, принимающий children.

Именно так один section сайта получает собственную боковую панель, собственные вкладки, собственный заголовок без единого оператора if относительно текущего URL.

Задание

Легко

Разделу menu нужен собственный заголовок: на /menu и его страницах dish, но больше нигде.

Файл app/menu/layout.jsx уже существует и передает children напрямую. Внутри его <section>, над {children}, добавьте:

Элемент <h2> с id="menu-header" и текстом Menu

Тесты проверяют, что заголовок отображается на /menu и на /menu/pizza, и что он отсутствует на /.

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

import './globals.css';

export const metadata = {
    title: 'My App',
};

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