NextJS сайтынын макетинин ичиндеги контент

Биз өткөн сабакта карап баштаган сайтынын негизги макетине көңүл буралы:

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

Көрүнүп тургандай, сайт макети функциялуу компонент болуп саналат. Бул учурда функциянын параметрине объект берилет, андан биз children ачкычын тиешелүү өзгөрмөгө алабыз. Бул өзгөрмөдө суралган URL дал келген page.jsx файлынын мазмуну сакталат.

Башкача айтканда, layout.jsx файлында бизде сайттын макети сакталып турат, ал эми children өзгөрмөсүн колдонуп, биз сайт макетинин кайсы жерине барактын контенти киргизилиши керек экенин көрсөтөбүз.

Мисал үчүн, барактын контентин бир кандайдыр бир тегге жасап көрөлү:

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