Saturs vietnes izkārtojumā NextJS

Apskatīsim galveno vietnes izkārtojumu, ko mēs sākām analizēt iepriekšējā nodarbībā:

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

Kā jūs redzat, vietnes izkārtojums ir komponents ar funkciju. Šajā gadījumā funkcijas parametram tiek padots objekts, no kura mēs izvelkam atslēgu children atbilstošajā mainīgajā. Šajā mainīgajā tiek glabāts faila page.jsx saturs, kas atbilst pieprasītajam URL.

Tas ir, failā layout.jsx mums tiek glabāts vietnes izkārtojums, un ar mainīgā children palīdzību mēs norādām vietu vietnes izkārtojumā, kurā jāievietojas lapas saturam.

Piemēram, noformēsim lapas saturu kādā tagā:

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