Veebilehe osad komponentides NextJS-is

Eelmises õppetükis kirjutasime teksti veebilehe osad otse paigutuse faili:

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

See võib aga olla ebamugav juhul, kui veebilehe osad sisaldavad palju koodi ja teksti. Seetõttu tavaliselt veebilehe osad viakse eraldi failidesse komponentidena.

Teeme näitena, viime saidi päise eraldi komponendi. Loome vastava faili:

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

Impordime oma komponendi paigutuse faili:

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

export default function RootLayout({children}) {
  
}

Kuvame oma komponendi teksti kasutades selle nimega silti:

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