NextJS'te Bileşenlerdeki Site Parçaları

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

export 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:

export default function Header() {
	return <>
		header
	</>;
}

Bileşenimizi layout dosyasına import edelim:

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

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

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

Site header ve footer'ı için ayrı bileşenler oluşturun.