Dynamic Routing

Next.js 144 views Dec 22, 2025 2 min read

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.

Some advanced sections are available for Registered Members

← Previous

Data Fetching Strategies

API Routes in Next.js