Części strony w komponentach w NextJS

W poprzedniej lekcji pisaliśmy tekst części strony bezpośrednio w pliku układu:

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

Może to jednak być niewygodne w przypadku, gdy części strony zawierają dużo kodu i tekstu. Dlatego zwykle części strony wynosi się do oddzielnych plików komponentów.

Dla przykładu wynieśmy nagłówek strony do oddzielnego komponentu. Stwórzmy odpowiedni plik:

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

Zaimportujmy nasz komponent w pliku z układem:

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

export default function RootLayout({children}) {
  
}

Wyświetlmy tekst naszego komponentu za pomocą tagu z jego nazwą:

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>
          stopka
        </footer>
      </body>
    </html>
  );
}