Sivuston osat komponenteissa NextJS:ssä

Edellisessä oppitunnissa kirjoitimme tekstin sivuston osista suoraan layout-tiedostossa:

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

Tämä voi kuitenkin olla hankalaa silloin, kun sivuston osat sisältävät paljon koodia ja tekstiä. Siksi sivuston osat yleensä siirretään erillisiin tiedostoihin komponentteina.

Tehdään esimerkkinä sivuston header erilliseksi komponentiksi. Luodaan vastaava tiedosto:

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

Tuodaan komponenttimme layout-tiedostoon:

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

export default function RootLayout({children}) {
  
}

Näytetään komponenttimme teksti sen nimellä merkityllä tagilla:

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