Obsah v rozložení stránky v NextJS

Pozrime sa na základné rozloženie stránky, ktoré sme začali rozoberať v predchádzajúcej lekcii:

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

Ako vidíte, rozloženie stránky predstavuje komponent s funkciou. Pritom do parametra funkcie sa odovzdáva objekt, z ktorého extrahujeme kľúč children do príslušnej premennej. V tejto premennej je uložený obsah súboru page.jsx, ktorý zodpovedá požadovanej URL.

To znamená, že v súbore layout.jsx je uložené rozloženie stránky a pomocou premennej children určujeme miesto v rozložení stránky, do ktorého sa má vložiť obsah stránky.

Napríklad, naformátujme obsah stránky do nejakého tagu:

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