Sisu paigutus veebisaidi maketis NextJS-is

Vaatleme põhilist veebisaidi maketti, mida hakkasime läbi võtma eelmises õppetükis:

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

Nagu näete, on veebisaidi makett komponent funktsiooniga. Samal ajal edastatakse funktsiooni parameetrina objekt, millest eraldame võtme children vastavasse muutujasse. Selles muutujas hoitakse faili page.jsx sisu, mis vastab päritud URL-ile.

See tähendab, et failis layout.jsx hoitakse meil veebisaidi maketti ja abiga muutuja children näitame kohta veebisaidi maketis, kuhu peaks sisestuma lehe sisu.

Näiteks vormistame lehe sisu mõnda silti:

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