NextJS'te Bileşenlerdeki Site Parçaları

Önceki derste, site parçalarının metnini doğrudan layout dosyasına yazıyorduk:

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

Ancak bu, site parçalarının çok fazla kod ve metin içerdiği durumlarda uygunsuz olabilir. Bu nedenle genellikle site parçaları ayrı bileşen dosyalarına çıkarılır.

Örnek olarak site header'ını ayrı bir bileşene çıkaralım. İlgili dosyayı oluşturalım:

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

Bileşenimizi layout dosyasına import edelim:

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

export default function RootLayout({children}) {
  
}

Bileşenimizin metnini, adıyla bir etiket kullanarak gösterelim:

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