Tartalom a weboldal elrendezésében NextJS-ben

Vizsgáljuk meg a weboldal fő elrendezését, amelyet az előző leckében kezdtünk el elemezni:

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

Amint látod, a weboldal elrendezése egy funkcióval rendelkező komponens. Eközben a függvény paraméterébe egy objektum kerül átadásra, amelyből kivonjuk a children kulcsot a megfelelő változóba. Ebben a változóban tárolódik a page.jsx fájl tartalma, amely megfelel a kért URL-nek.

Vagyis a layout.jsx fájlban tároljuk a weboldal elrendezését, és a children változó segítségével jelöljük meg a weboldal elrendezésében azt a helyet, ahová az oldal tartalmának be kell illeszkednie.

Példaként formázzuk az oldal tartalmát valamilyen tagbe:

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