Why this lesson matters

Understand dynamic routes and use it correctly in an App Router project. Dynamic segments, route groups and Link navigation let a route tree express changing identifiers and organizational structure without hard-coding navigation behavior.

How to reason about it

  • For Dynamic Routes, the outcome to verify is: The route parameter is part of the page contract and should be validated before sensitive queries.
  • In Dynamic Routes, keep this failure controlled: Using raw anchor URLs everywhere or trusting an unchecked dynamic parameter can break transitions and pass unsafe values into data queries.
  • Dynamic Routes practice target: Create a dynamic product route inside a route group and navigate to it with Link after validating the identifier.

Practical walkthrough

In the Dynamic Routes walkthrough: The route parameter is part of the page contract and should be validated before sensitive queries.

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

Practice it yourself

Practice

Dynamic Routes exercise

Create a dynamic product route inside a route group and navigate to it with Link after validating the identifier.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary