Mission 2: URL Parameters

เป้าหมายของ Mission นี้: อ่านค่า URL Parameter จาก Dynamic Route มาใช้ในโค้ด

flowchart LR
    U["เข้า /posts/5"] --> P["params.id = 5"]
    P --> C["โค้ดอ่าน id ไปใช้"]

อ่านค่า URL Parameter

ไฟล์ app/posts/[id]/page.tsx จะได้รับ params ที่มีค่า id ตรงกับส่วนของ URL ที่ผู้ใช้เข้ามา (เช่นเข้า /posts/5 จะได้ params.id === "5")

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

ถ้าหน้านั้นต้องเป็น Client Component

ไฟล์ที่มี "use client" (เช่นหน้าที่ต้องใช้ useState / useEffect) เขียนเป็น async ไม่ได้ เลย await params ไม่ได้ด้วย — ให้แกะค่าออกมาด้วย use() ของ React แทน

// app/posts/[id]/page.tsx
"use client";
import { use } from "react";

export default function PostDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  return <h1>กำลังดูโพสต์เลข {id}</h1>;
}

จำง่ายๆ: Server Component ใช้ await / Client Component ใช้ use() — แต่ผลลัพธ์ที่ได้ เหมือนกันคือค่า id ที่แกะออกมาจาก params แล้ว

เชื่อมจากหน้า List ไปหน้า Detail

ใช้ <Link> เดิมที่รู้จักอยู่แล้ว แค่ใส่ id ต่อท้าย href

import Link from "next/link";

<Link href={`/posts/${post.id}`}>{post.title}</Link>;

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