NextJS-те компоненттердегі сайт бөліктері

Алдыңғы сабақта біз мәтін жаздық сайт бөліктерін тікелей макет файлында:

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

Бірақ бұл ыңғайсыз болуы мүмкін сол жағдайда, қашан сайт бөліктері көп код пен мәтінді қамтиды. Сондықтан әдетте сайт бөліктері бөлек файлдарға шығарылады компоненттердің.

Мысал ретінде сайттың хедерін бөлек компонентке шығарайық. Сәйкес файлды жасайық:

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