Obsah v rozložení webu v NextJS

Podívejme se na základní rozložení webu, které jsme začali rozebírat v minulé lekci:

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

Jak vidíte, rozložení webu představuje komponentu s funkcí. Přitom do parametru funkce je předán objekt, ze kterého extrahujeme klíč children do odpovídající proměnné. V této proměnné je uložen obsah souboru page.jsx, který odpovídá požadovanému URL.

To znamená, že v souboru layout.jsx je u nás uloženo rozložení webu, a pomocí proměnné children určujeme místo v rozložení webu, do kterého musí být vložen obsah stránky.

Jako příklad pojďme upravit obsah stránky do nějakého tagu:

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