Dynamic Routing

⏱ Estimated reading time: 2 min

Dynamic routing in Next.js allows you to create pages with dynamic URLs using route parameters. It is commonly used for blogs, product pages, user profiles, and any content that depends on dynamic data.

1. What is Dynamic Routing?

Dynamic routes are created using square brackets [ ] in the folder or file name.
The value inside the brackets becomes a route parameter.

2. Dynamic Routes in App Router

Example: Single Dynamic Segment

app/
└── blog/
    └── [slug]/
        └── page.js

This route will match:

/blog/my-first-post
/blog/nextjs-routing

Accessing Params

export default function BlogPost({ params }) {
  return <h1>Post: {params.slug}</h1>;
}

3. Multiple Dynamic Segments

app/
└── shop/
    └── [category]/
        └── [product]/
            └── page.js

URL example:

/shop/electronics/laptop

export default function ProductPage({ params }) {
  const { category, product } = params;
  return <p>{category} - {product}</p>;
}

4. Catch-All Routes

Catch-all routes match multiple path segments.

app/
└── docs/
    └── [...slug]/
        └── page.js

Example URLs:

/docs
/docs/react
/docs/react/hooks

export default function Docs({ params }) {
  return <p>{params.slug.join('/')}</p>;
}

5. Optional Catch-All Routes

Optional catch-all routes also match the root path.

app/
└── docs/
    └── [[...slug]]/
        └── page.js

Matches:

/docs
/docs/nextjs
/docs/nextjs/routing

6. Generating Static Params

For static generation of dynamic routes:

export async function generateStaticParams() {
  return [
    { slug: 'post-1' },
    { slug: 'post-2' },
  ];
}

7. Dynamic Routes in Pages Router (Older)

pages/
└── blog/
    └── [slug].js

Access parameter:

import { useRouter } from 'next/router';

const router = useRouter();
const { slug } = router.query;

Use Cases

• Blog posts

• Product details pages

• User profiles

• Documentation pages

Conclusion

Dynamic routing in Next.js makes it easy to build flexible and scalable applications. With support for single, multiple, and catch-all routes, you can handle complex URL structures efficiently.