Mission 3: Workshop — เชื่อมลิงก์ไปหน้า Detail

เป้าหมายของ Mission นี้: เชื่อมหน้ารวมโพสต์เข้ากับหน้ารายละเอียด (ยังไม่ต้องดึงข้อมูลจริง)

flowchart LR
    L["หน้า /posts (List)"] -->|"คลิก Link ไปที่ /posts/id"| D["หน้า /posts/[id] (Detail)"]

สิ่งที่ต้องทำ

1. ในหน้า app/posts/page.tsx — ห่อ title ของแต่ละโพสต์ด้วย <Link href={/posts/${post.id}}>
2. สร้างไฟล์ app/posts/[id]/page.tsx ใหม่ — แสดง id ที่ได้รับมาก่อน (ยังไม่ต้อง fetch จริง)

Demo

// app/posts/[id]/page.tsx
export default async function PostDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return <h1>กำลังดูโพสต์เลข {id}</h1>;
}

ลองคลิกจากหน้า /posts แล้วเช็คว่า id ที่ขึ้นตรงกับโพสต์ที่คลิกไหม