How does file-based routing and a dynamic [id] route work?

In the App Router, folders define URL segments and page.jsx exposes a page. An [id] folder captures a dynamic value.

// app/products/[id]/page.jsx
export default async function ProductPage({ params }) {
  const { id } = await params;
  return <h1>Product: {id}</h1>;
}

Example: /products/42 gives an id of "42".

To be precise: this syntax matches the modern App Router, where params is asynchronous. A route parameter and a query string, e.g. ?sort=price, are different things. Data from the URL must be validated before it's used in a query.