Pages နှင့် Shared Layouts

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

page.tsx ဖြင့် route ဖန်တီးရန်
Root layout ၏တာဝန်ကို သိရန်
Nested layout အသုံးပြုတတ်ရန်

စာမျက်နှာတိုင်းမှာ header တူတူရေးရတာ မကြာခင်ထိန်းရခက်လာပါတယ်။ Layout က ထပ်နေတဲ့ UI ကို တစ်နေရာတည်းမှာထားပြီး child page ကို children နေရာကနေ ထည့်ပေးပါတယ်။

နားလည်ထားရမယ့် အချက်

Root layout က app တစ်ခုလုံးအတွက် မဖြစ်မနေလိုအပ်ပြီး html နဲ့ body tag ပါရပါတယ်။ Route တစ်ခုစီရဲ့ page.tsx က URL ကို အမှန်တကယ်အသုံးပြုနိုင်စေပါတယ်။ Folder အတွင်း layout.tsx ထပ်ထည့်ရင် အဲဒီ route segment နဲ့ အောက်က route တွေကိုပဲ wrap လုပ်တဲ့ nested layout ရပါတယ်။ Layout က navigation အတွင်းပြန်မတည်ဆောက်ဘဲ ဆက်ရှိနေလို့ sidebar သို့မဟုတ် player လို UI အတွက် သင့်တော်ပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

tsx

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="my">
      <body>
        <header>Myanmar Notes</header>
        {children}
      </body>
    </html>
  );
}

// app/notes/page.tsx
export default function NotesPage() {
  return <h1>မှတ်စုအားလုံး</h1>;
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

RootLayout က site title header ကို အားလုံးမျှဝေစေပြီး children နေရာမှာ လက်ရှိ page ဝင်လာပါတယ်။ NotesLayout ထည့်ရင် /notes အောက်က list နဲ့ detail နှစ်ခုလုံးမှာ Notes heading ကို မျှဝေနိုင်ပါတယ်။

You should see

/notes ကိုဖွင့်လျှင် shared header အောက်မှာ “မှတ်စုအားလုံး” စာမျက်နှာ ပေါ်မည်။

၅ မိနစ် စမ်းကြည့်

app/about/page.tsx အသစ်ဖန်တီးပြီး ကိုယ့် app အကြောင်း စာပိုဒ်တစ်ခု ထည့်ပါ။

Next.js — Layouts and Pages — Next.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Root layout မှာ html နှင့် body tag မထည့်ခြင်း
Layout ထဲမှာ route-specific data အားလုံးကို အတင်းစုထည့်ခြင်း

လေ့ကျင့်ခန်း

app/about/page.tsx အသစ်ဖန်တီးပြီး ကိုယ့် app အကြောင်း စာပိုဒ်တစ်ခု ထည့်ပါ။

You'll know it worked when: /notes ကိုဖွင့်လျှင် shared header အောက်မှာ “မှတ်စုအားလုံး” စာမျက်နှာ ပေါ်မည်။