Dynamic Routes

🔍 What Is It?

Dynamic routes in Next.js use folder names with square brackets to match URL segments:

• →[slug] — matches exactly one segment: /products/widget → params.slug = 'widget'
• →[...slug] — catch-all: /docs/a/b/c → params.slug = ['a', 'b', 'c']
• →[[...slug]] — optional catch-all: also matches /docs (no segments)
• →Multiple params: /blog/[category]/[slug] → { category, slug }

generateStaticParams tells Next.js which dynamic values to pre-build at build time (SSG). Without it, dynamic routes are rendered on-demand (SSR or ISR).

🎯 Why Do We Need It?

Without dynamic routes, you would need a separate page.tsx for every product, blog post, or user profile. Dynamic routes let one file handle thousands of URLs.

Combined with generateStaticParams, you get the best of both worlds: one file handles all URLs, and all known URLs are pre-built as static HTML at build time.

🏗️ What Happens in Real Projects?

Dynamic route patterns in production:

app/
├── products/[slug]/page.tsx        # /products/blue-widget
├── blog/[category]/[slug]/page.tsx # /blog/tech/my-post
├── docs/[...path]/page.tsx         # /docs/api/auth/jwt
├── [[...slug]]/page.tsx            # / AND /anything/nested
└── users/[id]/
    ├── page.tsx                    # /users/123
    ├── orders/page.tsx             # /users/123/orders
    └── settings/page.tsx           # /users/123/settings

⚙️ How It Works

How Next.js resolves dynamic params:

1. URL /products/blue-widget arrives
2. Next.js matches app/products/[slug]/page.tsx
3. params is set to { slug: 'blue-widget' }
4. The page component receives { params } as a prop
5. If generateStaticParams includes 'blue-widget', serve pre-built HTML
6. If not, and dynamicParams = true (default): SSR on first request, cache after

💻 Example

Dynamic Route Patterns — Single param, multiple params, catch-all, and generateStaticParams.

// app/products/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { db } from '@/lib/db';
import type { Metadata } from 'next';

interface Props {
  params: { slug: string };
}

// Pre-build all known product pages at build time
export async function generateStaticParams() {
  const products = await db.product.findMany({
    select: { slug: true },
    where: { active: true },
  });
  return products.map((p) => ({ slug: p.slug }));
}

// Per-page SEO metadata
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await db.product.findUnique({ where: { slug: params.slug } });
  if (!product) return { title: 'Not Found' };
  return {
    title: `${product.name} | Shop`,
    description: product.description,
    openGraph: { images: [product.imageUrl] },
  };
}

export default async function ProductPage({ params }: Props) {
  const product = await db.product.findUnique({
    where: { slug: params.slug },
  });

  if (!product) notFound();

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits