Conținut în layout-ul site-ului în NextJS

Să analizăm layout-ul principal al site-ului, pe care am început să-l studiem în lecția anterioară:

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

După cum vedeți, layout-ul site-ului reprezintă o componentă cu o funcție. În același timp, în parametrul funcției este transmis un obiect, din care extragem cheia children în variabila corespunzătoare. În această variabilă este stocat conținutul fișierului page.jsx, care corespunde URL-ului solicitat.

Adică în fișierul layout.jsx avem stocat layout-ul site-ului, iar cu ajutorul variabilei children indicăm locul în layout-ul site-ului, în care trebuie să fie introdus conținutul paginii.

De exemplu, să formatăm conținutul paginii într-o anumită etichetă:

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