Sehemu za Tovuti katika Vijenzi kwenye NextJS

Katika somo lililopita tuliandika maandishi ya sehemu za tovuti moja kwa moja kwenye faili la mpangilio:

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

Hata hivyo, hii inaweza kuwa isiyofaa katika kesi ambayo sehemu za tovuti zina kodi na maandishi mengi. Kwa hivyo kawaida sehemu za tovuti hutengwa kwenye faili tofauti za vijenzi.

Wacha kwa mfano tutenge kichwa cha tovuti katika kijenzi tofauti. Tutengeneze faili inayofaa:

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

Wacha tuingize kijenzi chetu kwenye faili la mpangilio:

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

export default function RootLayout({children}) {
  
}

Wacha tuonyeshe maandishi ya kijenzi chetu kwa kutumia lebo na jina lake:

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>
          kiwango cha chini
        </footer>
      </body>
    </html>
  );
}