Skip to main content

Dynamic Routes

When building data-driven applications, you often don't know the exact URL segments ahead of time, such as displaying a unique blog post ID or user profile.

In Next.js, you create a Dynamic Route by wrapping a folder name in square brackets [ ].

Capturing Parameters​

By creating a folder named app/blog/[slug]/page.tsx, you tell Next.js to intercept any value following the /blog/ route.

Next.js automatically passes the captured value directly into the component via the params prop.

// app/blog/[slug]/page.tsx

// If the user visits: /blog/hello-world
// 'params.slug' will evaluate to "hello-world"

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

Catch-All Routes​

If you need a route to capture multiple nested paths deeply, you can utilize the rest operator inside the brackets: [...slug].

If your directory is app/shop/[...slug]/page.tsx:

  • Visiting /shop/clothes passes params.slug = ['clothes']
  • Visiting /shop/clothes/tops/shirts passes params.slug = ['clothes', 'tops', 'shirts']

This is extremely common for fetching hierarchical e-commerce categories or documentation file systems.