NextJS da Sayt Qismlarini Komponentlarga Ajratish

Oldingi darsda biz sayt qismlarining matnini to'g'ridan-to'g'ri layout faylida yozgan edik:

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

Biroq, bu sayt qismlari ko'p kod va matnni o'z ichiga olgan hollarda qulay bo'lmasligi mumkin. Shuning uchun odatda sayt qismlari alohida komponent fayllariga ajratiladi.

Keling, misol uchun sayt headerini alohida komponentga ajrataylik. Tegishli faylni yaratamiz:

comp/header/header.jsxexport default function Header() {
  return <>
    header
  </>;
}

Komponentimizni layout faylida import qilamiz:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  
}

Komponentimiz matnini uning nomi bilan tegga yordamida chiqaramiz:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          <Header />
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}