07. Dynamic Segments, Catch-All ([...slug]) & Optional Catch-All ([[...slug]]) • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

1. **Single Dynamic Segment (`[id]`):** Matches `/product/123`.
2. **Catch-All Segment (`[...slug]`):** Matches `/docs/react/hooks/usestate` as an array `['react', 'hooks', 'usestate']`.
3. **Optional Catch-All (`[[...slug]]`):** Matches `/docs` AND `/docs/react/hooks`.

---

### 2. Code Walkthrough: Universal Docs Engine

```tsx
// app/docs/[[...slug]]/page.tsx
interface PageProps {
    params: {
        slug?: string[]; // Optional array!
    };
}

export default async function DocsPage({ params }: PageProps) {
    const pathSegments = params.slug || ["welcome"]; // Default fallback
    const currentDoc = await fetchDocByPath(pathSegments.join("/"));

return (
        <article className="prose p-8">
            <div className="breadcrumb">Docs &gt; {pathSegments.join(" &gt; ")}</div>
            <h1>{currentDoc.title}</h1>
            <div dangerouslySetInnerHTML={{ __html: currentDoc.html }} />
        </article>
    );
}
```

---

### 3. Route Groups `(marketing)` & Private Folders `_lib`

*   **Route Group `(folderName)`:** URL path me add huye bina routes ko organize karta hai aur alag layouts share karne deta hai (`app/(auth)/login/page.tsx` ➔ `/login`).
*   **Private Folder `_folderName`:** Routing se completely exclude ho jata hai (`app/_components/Button.tsx`).

---

### 4. Master Comparison Matrix

---

### 5. Interview Ke 3 Sawal Is Topic Se

1. **Catch-all `[...slug]` aur Optional Catch-all `[[...slug]]` me kya difference hai?** -> Normal catch-all parameterless root URL (`/docs`) match nahi karta (404 deta hai); optional catch-all root URL aur nested paths dono ko match karta hai.
2. **Route Groups ka primary production use case kya hota hai?** -> Application me multiple root layouts implement karna (jaise `(marketing)` group ke liye Landing Navbar aur `(dashboard)` group ke liye Sidebar layout).
3. **Dynamic segment me validation kaise lagate hain?** -> `notFound()` function call karke agar params regex ya database lookup match na karein.

---
**Next Topic:** 08. Parallel Routes (@modal, @analytics) & Conditional Slot Rendering

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track