Dynamic Routes

Dynamic routes use square brackets in a folder name, like [id], to match any value in that part of the URL. The value is passed to your page through params.

// app/category/[id]/page.tsx  ->  /category/languages

export default async function CategoryPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <h1>Category: {id}</h1>
}

// Nested: app/category/[id]/[topicId]/page.tsx
// -> /category/languages/javascript