Mission 1: Dynamic Route คืออะไร

เป้าหมายของ Mission นี้: เข้าใจ Dynamic Route ของ Next.js App Router

Dynamic Route คืออะไร

ปกติโฟลเดอร์ app/about/ จะได้ route /about ตายตัว — แต่ถ้าอยากได้หน้า /posts/1, /posts/2, /posts/3 ... (จำนวนไม่รู้ล่วงหน้า ขึ้นกับข้อมูลจริง) ต้องใช้ Dynamic Route โดยตั้งชื่อโฟลเดอร์ด้วยวงเล็บเหลี่ยม [ชื่อพารามิเตอร์]

app/
  posts/
    page.tsx          ← หน้า /posts (รวมทุกโพสต์)
    [id]/
      page.tsx         ← หน้า /posts/1, /posts/2, /posts/3, ... (โพสต์เดียว)

flowchart LR
    F["app/posts/[id]/page.tsx"] --> R1["/posts/1"]
    F --> R2["/posts/2"]
    F --> R3["/posts/3"]

คำศัพท์สำคัญ