Корневой макет

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

У каждого приложения есть части, которые никогда не меняются: каркас страницы, шапка, подвал. В Next.js они находятся в layout, а самый внешний называется root layout.

Это тот самый файл, который всё это время был перед вами:

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

Три вещи отличают его от страницы:

Он обязателен, и это единственный файл, который рендерит <html> и <body>
Он получает children для любой страницы, совпавшей с URL. Забудьте отрендерить {children}, и ваше приложение не покажет ничего, кроме оболочки.
Он оборачивает каждый маршрут в приложении, при этом ни одна страница его не импортирует

Сохраняется

Вот деталь, которая многих удивляет. Когда пользователь переходит с / на /menu, layout не создаётся заново. Next.js подменяет страницу внутри него и не затрагивает layout.

Поэтому общий заголовок не мерцает, видео в боковой панели продолжает воспроизводиться, а любое состояние внутри layout сохраняется при навигации: открытое меню остается открытым, позиция прокрутки остается на месте. Layout — это долгоживущий фрейм; страницы сменяют друг друга внутри него.

Одно следствие, о котором стоит помнить: поскольку layout не перезапускается при навигации, он не может прочитать searchParams текущей страницы. Он не отслеживает изменения.

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

В этом уроке нет задания по программированию.