NextJS တွင် Components များအတွင်း Website ၏ အစိတ်အပိုင်းများ

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် Website ၏ အစိတ်အပိုင်းများ၏ စာသားများကို layout ဖိုင်ထဲတွင် တိုက်ရိုက်ရေးသားခဲ့သည်။

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

သို့သော် ၎င်းသည် အဆင်မပြေနိုင်သည်မှာ Website ၏ အစိတ်အပိုင်းများတွင် ကုဒ်နှင့်စာသားများ များစွာပါဝင်သည့်အခါဖြစ်သည်။ ထို့ကြောင့် ပုံမှန်အားဖြင့် Website ၏ အစိတ်အပိုင်းများကို သီးခြား Component ဖိုင်များသို့ ထုတ်ယူကြသည်။

ဥပမာအနေဖြင့် Website ၏ header ကို သီးခြား Component တစ်ခုအဖြစ်ထုတ်ယူကြပါစို့။ သက်ဆိုင်ရာဖိုင်ကို ဖန်တီးပါမည်။

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

ကျွန်ုပ်တို့၏ Component ကို layout ဖိုင်ထဲသို့ Import လုပ်ပါမည်။

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

export default function RootLayout({children}) {
	
}

ကျွန်ုပ်တို့၏ Component ကို ၎င်း၏အမည်ဖြင့် Tag ကိုအသုံးပြု၍ ထုတ်ပြပါမည်။

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

Website ၏ header နှင့် footer အတွက် သီးခြား Components များကို ပြုလုပ်ပါ။