Zawartość w układzie strony w NextJS

Rozważmy główny układ strony, który zaczęliśmy analizować w poprzedniej lekcji:

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

Jak widzisz, układ strony przedstawia sobie komponent z funkcją. Przy tym w parametr funkcji przekazywany jest obiekt, z którego wyodrębniamy klucz children do odpowiedniej zmiennej. W tej zmiennej przechowywana jest zawartość pliku page.jsx, który odpowiada żądanemu URL.

Czyli w pliku layout.jsx u nas przechowywany jest układ strony, a za pomocą zmiennej children wskazujemy miejsce w układzie strony, w które powinna wstawić się zawartość strony.

Dla przykładu oceńmy zawartość strony w jakiś tag:

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