Dynamic Routes ใน NextJS

ใน NextJS คุณสามารถสร้าง เส้นทางแบบไดนามิก (dynamic routes) ได้ เส้นทางดังกล่าวถือว่า ส่วนหนึ่งของ URL สามารถมีค่าใดก็ได้ ตามต้องการ ตัวอย่างเช่น ที่อยู่ /users/1 ซึ่งแทนที่จะเป็น เลข 1 อาจจะเป็นเลขใดก็ได้ ซึ่งโดยเทคนิคแล้วตรงกับ id ของผู้ใช้ ที่เราต้องการจะแสดง

ในกรณีนี้เราไม่จำเป็นต้องสร้าง โฟลเดอร์จำนวนมากสำหรับแต่ละเลขที่อาจเกิดขึ้นได้ เพียงแค่ประกาศว่าส่วนนี้ ของที่อยู่เป็นแบบไดนามิกก็พอ ในกรณีนี้ คำขอทั้งหมดในรูปแบบนี้จะ ถูกจัดการโดยไฟล์ทั่วไป page.jsx

เพื่อสร้างพารามิเตอร์แบบไดนามิก จำเป็นต้องใส่ชื่อโฟลเดอร์ที่เกี่ยวข้อง ไว้ในเครื่องหมายวงเล็บเหลี่ยม ในกรณีของเราจะเป็น โครงสร้างโฟลเดอร์ดังต่อไปนี้:

• /app//users//[id]/

มาสร้างคอมโพเนนต์ที่เกี่ยวข้องกัน:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

ในขณะที่พารามิเตอร์ที่เรากำหนดจะ ถูกเก็บไว้ในอ็อบเจ็กต์พิเศษ params มาดูค่าของพารามิเตอร์นี้กัน:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}