Układ główny

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 11 z 47.

Każda aplikacja ma elementy, które nigdy się nie zmieniają: szkielet strony, nagłówek, stopkę. W Next.js znajdują się one w układzie, a ten najbardziej zewnętrzny nazywa się układem głównym.

To plik, który przez cały czas był przed tobą zablokowany:

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

Trzy rzeczy odróżniają go od strony:

Jest wymagany i to jedyny plik, który renderuje <html> i <body>
Otrzymuje children, czyli dowolną stronę dopasowaną do adresu URL. Jeśli zapomnisz wyrenderować {children}, aplikacja wyświetli tylko powłokę.
Obejmuje każdą trasę w aplikacji, bez konieczności importowania go przez jakąkolwiek stronę

To się utrzymuje

Oto część, która zaskakuje wiele osób. Gdy użytkownik przechodzi z / do /menu, układ nie jest tworzony ponownie. Next.js podmienia znajdującą się w nim stronę i pozostawia układ bez zmian.

Dzięki temu wspólny nagłówek nie migocze, film na pasku bocznym nadal się odtwarza, a każdy stan przechowywany w układzie zostaje zachowany podczas nawigacji: otwarte menu pozostaje otwarte, a pozycja przewinięcia się nie zmienia. Układ to długowieczna rama, w której strony pojawiają się i znikają.

Warto pamiętać o jednej konsekwencji: ponieważ układ nie uruchamia się ponownie podczas nawigacji, nie może odczytać bieżącego searchParams strony. Nie nasłuchuje zmian.

Spróbuj swoich sił

Ta lekcja nie zawiera wyzwania z kodem.