Dynamic Routing & Dynamic Params

▲ Next.js Lesson 10 Intermediate

Dynamic routing maps variable URL parameters to page inputs, letting you render dynamic content like product pages or user profiles from a single layout template.

1 Query parameters, path dynamic mappings and params keys

Dynamic routes map folders to matching parameters:

dynamic path param: Files like app/product/[id]/page.js map parameters to the params object (e.g. /product/123 provides params.id = '123').
searchParams: Optional query string parameters (e.g. /search?q=query) are passed to pages via the searchParams object.

2 Reading Dynamic Parameters in Code

Let's check how to read URL parameters inside a page component:

React — Reading params

// Dynamic params parameters are injected directly into the Page props
export default function ProductDetailPage({ params, searchParams }) {
  const productId = params.id;
  const filterQuery = searchParams.filter; // reads ?filter=val query parameter

  return (
    <div>
      <h3>Viewing Product: {{ productId }}</h3>
      <p>Active Filter: {{ filterQuery ?? 'None' }}</p>
    </div>
  );
}

3 Code Challenge

Challenge: Write a dynamic route layout path representing a blog slug (e.g. app/blog/[slug]/page.js). Fetch the corresponding post contents from a mock JSON API using the dynamic parameter value.