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

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

app/layout.jsxexport 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 တစ်ခုခုဖြင့် အလှဆင်ကြည့်ပါစို့။

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