Dynamic Routes

Dynamic Routes are defined using square brackets []. For example, if you create a file named app/products/[id]/page.tsx, it will generate pages that match URLs such as /products/1 and /products/2.

app/
└── products/
　　　└── [id]/
　　　　　　└── page.tsx

export default function ProductPage({ params }: { params: { category: string, id: string } }) {
  return (
    <>
      <h1>Category: {params.category}</h1>
      <h2>Product ID: {params.id}</h2>
    </>
  )
}