NextJS'теги компоненттердеги сайттын бөлүктөрү

Мурунку сабакта биз текстти сайттын бөлүктөрүн түздөн-түз макет файлына жаздык:

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

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

Мисал үчүн, сайттын header бөлүгүн өзүнчө компонентке бөлөлү. Тиешелүү файлды түзөлү:

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

Биздин компонентибизди макет файлына импорттойбуз:

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

export default function RootLayout({children}) {
  
}

Биздин компоненттин текстин анын аты менен тег аркылуу көрсөтөлү:

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>
  );
}