Route Groups နှင့် Nested Layouts

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

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

Route group syntax ကိုသုံးရန်
Layout boundary ကို စနစ်တကျရွေးရန်
URL structure နှင့် code organization ကို ခွဲမြင်ရန်

Project ကြီးလာတဲ့အခါ public website နဲ့ login ဝင်ပြီးသုံးရတဲ့ dashboard က header တူချင်မှတူပါမယ်။ Folder အားလုံးကို URL ထဲပါစရာမလိုဘဲ route group နဲ့ code ကို အုပ်စုခွဲနိုင်ပါတယ်။

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

Parentheses ပါတဲ့ (marketing) နဲ့ (dashboard) folder name တွေဟာ URL ထဲမဝင်ပါဘူး။ Group တစ်ခုစီမှာ layout.tsx ထည့်ပြီး မတူတဲ့ navigation၊ sidebar သို့မဟုတ် access boundary ထားနိုင်ပါတယ်။ ဒါပေမယ့် group နှစ်ခုမှာ တူတဲ့ URL ထွက်မယ့် page နှစ်ခုမထားရပါဘူး။ Root layout မျိုးစုံခွဲရင် group ကြား navigation မှာ full page load ဖြစ်နိုင်တာကို သိထားပါ။

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

text

app/
├─ (marketing)/
│  ├─ layout.tsx
│  ├─ page.tsx          → /
│  └─ about/page.tsx    → /about
└─ (dashboard)/
   ├─ layout.tsx
   ├─ notes/page.tsx    → /notes
   └─ profile/page.tsx  → /profile

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

အောက်က structure မှာ (marketing)/about/page.tsx ရဲ့ URL က /about ဖြစ်ပြီး (dashboard)/notes/page.tsx က /notes ဖြစ်ပါတယ်။ Parentheses ကို URL မှာ ရိုက်စရာမလိုပါဘူး။

You should see

Marketing နှင့် dashboard route များသည် သက်ဆိုင်ရာ layout ကိုသုံးပြီး URL တွင် group name မပါ။

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

လက်ရှိ project ကို (public) နဲ့ (workspace) group နှစ်ခုခွဲပြီး layout မှာ background အရောင်မတူအောင် စမ်းပါ။

Next.js — Project Structure — Next.js

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

Route group name ကို URL ထဲပါမယ်ဟု ထင်ခြင်း
Group နှစ်ခုအတွင်း URL တူသော page နှစ်ခုဖန်တီးခြင်း

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

You'll know it worked when: Marketing နှင့် dashboard route များသည် သက်ဆိုင်ရာ layout ကိုသုံးပြီး URL တွင် group name မပါ။