Nested dynamic routes

This page explains how to create routes with multiple dynamic parameters in Next.js.

Understanding nested dynamic routes

While single dynamic routes work for one variable segment, you often need multiple dynamic parts in your URLs.

Nested dynamic routes allow you to handle multiple dynamic segments in a single URL pattern. Common use cases include:

Product reviews: /products/123/reviews/456
User comments: /posts/789/comments/012
Nested categories: /categories/electronics/laptops/gaming

Creating nested dynamic routes

To create a nested dynamic route in Next.js:

Create your first dynamic segment folder (e.g., [productId])
Inside that, create your nested folders including any additional dynamic segments (e.g., reviews/[reviewId])
Add your page.tsx file in the deepest folder

Directoryapp/
- Directoryproducts/
  - Directory[productId]/
    Directoryreviews/
    Directory[reviewId]/
    page.tsx /products/123/reviews/456

Here’s a basic nested dynamic route component:

export default async function ProductReview() {
  return <h1>Product review page</h1>;
}

How nested dynamic routes work

When you create multiple folders with square brackets (e.g., [productId]/reviews/[reviewId]), Next.js treats each as a dynamic segment. This means:

/products/1/reviews/2 and /products/3/reviews/4 map to the same page component
Parameters can be any string (e.g., /products/iphone/reviews/great-camera)
A single component handles all matching routes

Accessing multiple parameters

The params prop contains all dynamic segments from your URL. For nested routes, you’ll receive multiple parameters:

export default async function ProductReview({
  params,
}: {
  params: Promise<{ productId: string; reviewId: string }>;
}) {
  const { productId, reviewId } = await params;

  // Use both parameters in your component
  return (
    <h1>
      Review {reviewId} for product {productId}
    </h1>
  );
}

For example:

URL /products/iphone/reviews/123:
- params.productId = "iphone"
- params.reviewId = "123"

Nested dynamic routes are particularly useful for:

Product reviews or comments
Multi-level categorization
Any URL pattern requiring multiple variable segments