Next.js › Dynamic Routes & Catch-All Segments

What is a dynamic route in Next.js, and how do you create one?

Beginner

Answer

A dynamic route lets a single page template handle many different URLs by using a folder name wrapped in square brackets, such as [id], which captures that part of the URL as a parameter you can use to fetch the correct data for that specific page.

// app/products/[id]/page.js
export default async function ProductPage({ params }) {
  const { id } = await params;
  const product = await getProduct(id);
  return <h1>{product.name}</h1>;
}

Real-world example An online store uses a single dynamic route to display thousands of different product pages, with each product's unique id in the URL determining which product details are shown.

Common follow-ups: How do you access the dynamic parameter value inside the page component?;Can you have multiple dynamic segments in the same route?

Routing (App/Pages Router);Data Fetching