Dynamic Routes

So far, all routes you created were static, meaning the URL is fixed. For example, /about or /contact.

In real applications, you often need dynamic pages. For example:

• A blog post page → /blog/post-1;
• A product page → /products/123.

You cannot create a separate folder for every possible value. This is where dynamic routes are used.

Creating a Dynamic Route

In Next.js, dynamic routes are created using square brackets in folder names.

Example:

app/
  blog/
    [slug]/
      page.tsx

This creates a dynamic route:

/blog/[slug]

Now this page can handle URLs like:

• /blog/post-1;
• /blog/post-2;
• /blog/anything.

Accessing Route Parameters

Inside the page, you can access the dynamic value using params.

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

If the URL is /blog/post-1, then:

params.slug = "post-1"

Example - Product Page

app/
  products/
    [id]/
      page.tsx

export default function ProductPage({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}

This allows you to create pages for any product without creating separate files.

Why Dynamic Routes Are Useful

• You can create flexible pages for any data;
• You avoid creating hundreds of static files;
• You can load content based on URL parameters;
• It is essential for real-world apps like blogs, shops, and dashboards.