საიტის ნაწილები კომპონენტებში 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>
	);
}

შექმენით ცალკე კომპონენტები საიტის ჰედერისთვის და ფუტერისთვის.