NextJS da Sayt Qismlarini Komponentlarga Ajratish

Oldingi darsda biz sayt qismlarining matnini to'g'ridan-to'g'ri layout faylida yozgan edik:

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

Biroq, bu sayt qismlari ko'p kod va matnni o'z ichiga olgan hollarda qulay bo'lmasligi mumkin. Shuning uchun odatda sayt qismlari alohida komponent fayllariga ajratiladi.

Keling, misol uchun sayt headerini alohida komponentga ajrataylik. Tegishli faylni yaratamiz:

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

Komponentimizni layout faylida import qilamiz:

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

export default function RootLayout({children}) {
	
}

Komponentimiz matnini uning nomi bilan tegga yordamida chiqaramiz:

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

Sayt headeri va footeri uchun alohida komponentlar yarating.