NextJS'теги компоненттердеги сайттын бөлүктөрү

Мурунку сабакта биз текстти сайттын бөлүктөрүн түздөн-түз макет файлына жаздык:

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

Бирок, бул ыңгайсыз болушу мүмкүн, эгерде сайттын бөлүктөрү көп код жана текстти камтыса. Ошондуктан, адатта, сайттын бөлүктөрү бөлүнүк файлдардагы компоненттерге бөлүнөт.

Мисал үчүн, сайттын header бөлүгүн өзүнчө компонентке бөлөлү. Тиешелүү файлды түзөлү:

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

Сайттын header жана footer бөлүктөрү үчүн өзүнчө компоненттерди түзүңүз.