NextJS တွင် ဆိုဒ်အပြင်အဆင် အတွင်းရှိ အကွက်အကြောင်းအရာ

ကျွန်ုပ်တို့ ယခင်သင်ခန်းစာတွင် စတင်လေ့လာခဲ့သော ဆိုဒ်၏အဓိကအပြင်အဆင်ကို သုံးသပ်ကြည့်ပါမည်။

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

မြင်တွေ့ရသည့်အတိုင်း ဆိုဒ်၏အပြင်အဆင်သည် function တစ်ခုပါသော component တစ်ခုဖြစ်သည်။ ထို့အပြင် function ၏ parameter ထဲသို့ object တစ်ခုကို �ေးပို့ပြီး ၎င်းမှ သော့ချက် children ကို သက်ဆိုင်ရာ variable ထဲသို့ ထုတ်ယူပါသည်။ ဤ variable ထဲတွင် တောင်းဆိုထားသော URL နှင့် ကိုက်ညီသည့် page.jsx ဖိုင်မှ အကြောင်းအရာများ သိမ်းဆည်းထားပါသည်။

ဆိုလိုသည်မှာ layout.jsx ဖိုင်ထဲတွင် ဆိုဒ်၏အပြင်အဆင်ကို သိမ်းဆည်းထားပြီး children variable ကိုအသုံးပြု၍ စာမျက်နှာ၏အကွက်အကြောင်းအရာ ထည့်သွင်းရမည့် နေရာကို ဆိုဒ်အပြင်အဆင်ထဲတွင် ညွှန်ပြပါသည်။

နမူနာအနေနှင့် စာမျက်နှာ၏အကွက်အကြောင်းအရာကို tag တစ်ခုခုဖြင့် အလှဆင်ကြည့်ပါစို့။

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

သင့်ဆိုဒ်၏ အကွက်အကြောင်းအရာကို main tag ဖြင့် အလှဆင်ပါ။