Сайт қисмлари NextJS да компонентларда

Олдинги дарсда биз матнни сайт қисмларини тўғридан-тўғри макет файлида ёзганмиз:

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

Бирок, бу қулай бўлмаслиги мумкин агар сайт қисмлари кўп код ва матнни ўз ичига олса. Шу сабабдан оддатка сайт қисмлари алаҳида файлларга компонентларга ажратилади.

Мисол учун, келтириб сайт хедерини алаҳида компонентга ажратамиз. Мос келувчи файл яратамиз:

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

Бизнинг компонентимизни макет файлига импорт қиламиз:

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

export default function RootLayout({children}) {
	
}

Бизнинг компонентимиз матнини унинг номи билан тег орқали чиқарамиз:

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

Сайт хедери ва футери учун алоҳида компонентлар яратинг.