Mission 1: ทบทวน Next.js & App Router

เป้าหมายของ Mission นี้: ทบทวน Next.js คืออะไร และ App Router ทำงานยังไง

Next.js คืออะไร (ทบทวนสั้นๆ)

Next.js คือ Framework ที่สร้างขึ้นบน React ช่วยจัดการเรื่อง routing, การ build, และ performance ให้อัตโนมัติ — ไม่ต้องตั้งค่าเองทุกอย่างตั้งแต่ศูนย์เหมือนเขียน React เปล่าๆ

App Router

โฟลเดอร์ app/ ของ Next.js ทำงานแบบ 1 โฟลเดอร์ = 1 หน้าเว็บ 1 เส้นทาง (route) — ไฟล์ page.tsx ในโฟลเดอร์ไหน คือเนื้อหาของหน้านั้น

flowchart LR
    F1["app/page.tsx"] -->|"โฟลเดอร์ = URL"| U1["/"]
    F2["app/about/page.tsx"] -->|"โฟลเดอร์ = URL"| U2["/about"]

app/
  page.tsx        ← หน้า "/"
  about/
    page.tsx      ← หน้า "/about"

จำง่ายๆ: ชื่อโฟลเดอร์ = ชื่อ URL

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