การแยก Route (Routing)
แผนที่เส้นทางการบิน และท่อเดินเชื่อมห้องอวกาศ!

ในอดีตเวลาเขียนโค้ดแยกแต่ละหน้าเพจออกไป เราจำเป็นต้องดาวน์โหลดแพ็คเกจเสริมมาเขียนสวิตช์แผนผังลิงก์ยาวเหยียด ซึ่งดูแลรักษาค่อนข้างยาก แต่สถาปัตยกรรมของ Next.js (App Router) เข้ามาเปลี่ยนเกมนี้ด้วยการประกาศว่า"โครงสร้างโฟลเดอร์ของไฟล์บนเครื่องของคุณ จะถูกจับมาตั้งชื่อเป็น Route บนเว็บบราวเซอร์ทันที!"

โดยมีเงื่อนไขสำคัญอย่างหนึ่งคือ **ภายในโฟลเดอร์นำทางนั้น จะต้องมีไฟล์ชื่อ page.tsx วางอยู่ข้างในเสมอ** เพื่อทำหน้าที่คายโครงสร้าง UI ออกไปแสดงผลบนหน้าจอ:

พิมพ์เขียวโฟลเดอร์ Next.js Directory Tree
src/app/
├── page.tsx           <-- วิ่งเข้าหน้าแรกสุดที่ (Route: /)
├── lessons/
│   ├── api/
│   │   └── page.tsx   <-- วิ่งเข้าหน้ารายการ (Route: /lessons/api)
│   ├── array/
│   │   └── page.tsx   <-- วิ่งเข้าหน้ารายการ (Route: /lessons/array)
│   └── routing/
│       └── page.tsx   <-- โค้ดของหน้านี้ปัจจุบัน! (Route: /lessons/routing)

การเดินทางสลับเปลี่ยนหน้าจอในโลกของเว็บ มีคำสั่งคอยนำทางอยู่ 2 ชนิดหลัก ๆ ซึ่งให้ประสบการณ์ผู้ใช้ (UX) แตกต่างกันราวฟ้ากับเหว:

บางครั้งเราไม่สามารถสร้างโฟลเดอร์แยกเดี่ยว ๆ รองรับทุกตัวเลขข้อมูลได้ เช่น หากเรามีบทเรียนย่อยนับพันเรื่อง หรือมีบัญชีนักบินจำนวนมาก การตั้งชื่อโฟลเดอร์ตายตัวแบบ /lessons/api, /lessons/array ย่อมไม่สะดวกสบาย Next.js จึงคิดลอจิกสุดเทพที่เรียกว่า Dynamic Routes

โดยการ **ตั้งชื่อโฟลเดอร์ล้อมรอบด้วยวงเล็บเหลี่ยม เช่น [id] หรือ [slug]** เพื่อบอกว่าตรงจุดนี้คือตัวแปรยืดหยุ่นนะ ค่าที่ส่งผ่าน URL บาร์จะถูกมัดรวมส่งเข้าไปในโค้ดให้อัตโนมัติ:

การตั้งชื่อและอ่านค่า Dynamic URL
// 1. สร้างโฟลเดอร์ในโปรเจกต์ชื่อ: src/app/pilot/[id]/page.tsx
// 2. หากผู้ใช้พิมพ์พิมพ์นำทางมาที่: https://zoon.space/pilot/captain-mika

// 3. ในไฟล์ page.tsx เราสามารถแกะคีย์ [id] มาใช้งานได้ทันทีดังนี้:
export default async function PilotPage({ params }) {
  // ดึงคำว่า "captain-mika" จากวงเล็บเหลี่ยม params
  const pilotId = (await params).id; 
  
  return (
    <div>
      <h1>ยินดีต้อนรับนักบินประจำการ: {pilotId}</h1>
    </div>
  );
}