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

Сайттың хедері мен футері үшін бөлек компоненттер жасаңыз.