Dynamic Routes and Route Parameters
Dynamic segments allow one route to represent many resources. A folder such as [id] captures one URL segment.
For example, app/products/[id]/page.tsx can render /products/101, /products/202, and /products/abc.
Dynamic routes are especially useful for product pages, user profiles, blog posts, documentation pages, and database-backed resources.
Dynamic Product Route
type ProductPageProps = {
params: Promise<{ id: string }>;
};
export default async function ProductPage({ params }: ProductPageProps) {
const { id } = await params;
return <h1>Product: {id}</h1>;
}💡 The dynamic
[id] segment provides the identifier captured from the URL.Key Takeaways
- Use
[segment]for dynamic URL segments. - Dynamic parameters are useful for resource-oriented pages.
- Validate dynamic parameters before using them in database queries.