Sisältö sivuston asettelussa NextJS:ssä

Tarkastellaan pääasiallista sivuston asettelua, jota aloimme käsitellä edellisessä oppitunnissa:

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

Kuten näet, sivuston asettelu edustaa komponenttia, jossa on funktio. Samalla funktion parametriin välitetään objekti, josta poimimme avaimen children vastaavaan muuttujaan. Tässä muuttujassa säilytetään tiedoston page.jsx sisältö, joka vastaa pyydettyä URL-osoitetta.

Eli tiedostossa layout.jsx meillä säilytetään sivuston asettelu, ja avulla muuttujan children me osoitamme paikan sivuston asettelussa, johon sivun sisällön tulee lisätä.

Esimerkkinä muotoillaan sivun sisältö johonkin tagiin:

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