Сайт макетидаги контент NextJS да

Сайтнинг асосий макетини кўриб чиқайлик, уни биз ўтган дарсда кўришни бошлаган эдик:

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

Кўриниб турганидек, сайт макети функцияли компонентдан иборат. Бу ҳолда функция параметрига объект берилади, ундан биз children калитини мос ўзгарувчига жойлаштирамиз. Ушбу ўзгарувчида page.jsx файлининг муҳити сақланади, у сўралган URL га мос келади.

Яъни layout.jsx файлида бизда сайт макети сақланган, children ўзгарувчиси ёрдамида эса биз сайт макетидаги саҳифа контенти кириши керak бўлган жойни кўрсатамиз.

Мисол учун саҳифа контентини бирор тегга жойлаштирамиз:

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