Vietnes daļas komponentos NextJS

Iepriekšējā nodarbībā mēs rakstījām vietnes daļu tekstu tieši izkārtojuma failā:

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

Tomēr tas var būt neērti gadījumos, kad vietnes daļas satur daudz koda un teksta. Tāpēc parasti vietnes daļas izveido atsevišķos komponentu failos.

Izveidosim piemēram vietnes headeri atsevišķā komponentā. Izveidosim atbilstošu failu:

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

Importēsim mūsu komponentu izkārtojuma failā:

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

export default function RootLayout({children}) {
  
}

Parādīsim mūsu komponenta tekstu izmantojot tā nosaukuma tagu:

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