📂 Next.js 16: Dynamic Routes, Catch‑All & SEO‑Friendly URLs

Static routes like /blog or /about are easy to manage, but real‑world applications (E‑commerce, Social Media, Blogs) handle thousands of unique pages for products, users, and posts. Creating manual folders for each is impossible — this is where Dynamic Routing comes in.

🧠 1. The Need for Dynamic Routes

Imagine a blog with 500 posts. Instead of creating 500 folders, we create one dynamic folder that acts as a template for all posts.

• Static Route: /blog/contact (Fixed)
• Dynamic Route: /blog/[slug] (Variable)

🧩 The [slug] vs [id] Concept

• [slug] → Use for user‑facing URLs (SEO friendly)

  • Example: /blog/how-to-learn-nextjs

• [id] → Use for internal systems or dashboards

  • Example: /admin/orders/12345

🔥 2. Next.js 16 Reality: Asynchronous Params

In Next.js 16, a major shift happened: params and searchParams are now Promises.

❗ Mandatory Rule

You cannot destructure params directly in the function argument anymore. You must await them inside the component because Server Components are async by default.

✅ Correct Implementation (Server Component)

// app/blog/[slug]/page.jsx
 
export default async function BlogPostPage({ params, searchParams }) {
  // Both are Promises in Next.js 16
  const { slug } = await params;
  const { ref, lang } = await searchParams;
 
  return (
    <main>
      <h1>Post: {slug}</h1>
 
      <div className="metadata">
        <p>Source: {ref}</p>
        <p>Language: {lang}</p>
      </div>
    </main>
  );
}

URL Example

/blog/nextjs-anatomy?ref=youtube&lang=en

• slug → nextjs-anatomy
• ref → youtube

🔍 3. params vs searchParams

Understanding the difference is crucial for SEO and application state.

🧩 The House Analogy

• params → Your house address (City / Street / House No.) → This is how people and Google find you.
• searchParams → A note on the doorbell ("Ring twice") → Extra instructions, not location.

🛠️ 4. Data‑Driven Routing & SEO 404s

When fetching data dynamically, you must handle cases where a slug does not exist in the database.

import { notFound } from "next/navigation";
 
const db = {
  "nextjs-intro": "Welcome to Next.js",
  "react-hooks": "Mastering Hooks"
};
 
export default async function Page({ params }) {
  const { slug } = await params;
  const content = db[slug];
 
  if (!content) {
    // Triggers not-found.jsx and sends proper 404 status to Google
    notFound();
  }
 
  return <h1>{content}</h1>;
}

🌊 5. Advanced Routing: Catch‑All Segments

Kabhi‑kabhi URL ki depth unknown hoti hai (Docs site, file explorer, category trees).

A. Catch‑All [...slug]

• Handles: /docs/react, /docs/react/hooks
• Output: ['react', 'hooks']

⚠️ Limitation: Root /docs match nahi karega → 404.

B. Optional Catch‑All [[...slug]]

Double brackets segment ko optional bana dete hain.

🖱️ 6. Routing in Client Components

Client Components route data ko hooks ke through access karte hain.

"use client";
 
import { useParams, useSearchParams } from "next/navigation";
 
export default function ClientComponent() {
  const params = useParams();
  const searchParams = useSearchParams();
 
  return (
    <div>
      <p>Path Slug: {params.slug}</p>
      <p>Query Ref: {searchParams.get("ref")}</p>
    </div>
  );
}

📈 7. SEO‑Friendly URL Rules

• Use meaningful words → /blog/nextjs-tutorial is better than /blog/123
• Use kebab‑case → hyphen separated slugs
• Avoid query params for main content → prefer params
• Keep URLs short & readable

🎯 Summary Mental Model

• [slug] → Single dynamic value
• [...slug] → Unlimited depth (Array)
• [[...slug]] → Optional depth (Array or undefined)
• Next.js 16 → Always await params in Server Components

🚀 Next Lesson

Layouts Deep Dive — layout.jsx vs template.jsx and why one persists while the other resets.