Project Folder Structure ကို ဖတ်တတ်အောင်လုပ်ခြင်း

Project အသစ်ဖွင့်လိုက်ရင် file တွေအများကြီးမြင်ရပေမယ့် အားလုံးကို တစ်ပြိုင်နက်မှတ်စရာမလိုပါဘူး။ နေ့တိုင်းထိတွေ့မယ့် app၊ public နဲ့ package.json သုံးခုပဲ အရင်နားလည်ရင် စတင်နိုင်ပါတယ်။

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

app folder ထဲမှာ route နဲ့ UI ကိုထားပါတယ်။ public ထဲက image၊ icon လို static file တွေကို /logo.png ပုံစံနဲ့ခေါ်နိုင်ပါတယ်။ package.json က dependency နဲ့ script စာရင်း၊ next.config.ts က framework configuration ဖြစ်ပါတယ်။ page.tsx၊ layout.tsx၊ loading.tsx၊ error.tsx၊ not-found.tsx နဲ့ route.ts တို့က အမည်တိတိကျကျရှိမှ Next.js က အထူးအဓိပ္ပာယ်နဲ့ဖတ်ပါတယ်။ components နဲ့ lib ကတော့ ကိုယ့်အဖွဲ့သတ်မှတ်တဲ့ organization ဖြစ်ပြီး URL မဖြစ်ပါဘူး။

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

myanmar-notes/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ globals.css
│  └─ notes/
│     ├─ page.tsx
│     └─ [id]/page.tsx
├─ components/
├─ lib/
├─ public/
├─ next.config.ts
└─ package.json

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

ဒီ tree မှာ app/notes/page.tsx က /notes ဖြစ်ပြီး app/notes/[id]/page.tsx က dynamic note detail ဖြစ်ပါတယ်။ lib/data.ts ကို route အဖြစ်မယူဘဲ data access helper အဖြစ်သာ သုံးပါတယ်။

/ နှင့် /notes route နှစ်ခုပါဝင်သော ရှင်းလင်းသည့် project structure ရရှိမည်။

Next.js — Project Structure — Next.js