nextjs-routing-advanced

## Quick Reference

| Route Type | Folder Pattern | URL Example |
|------------|----------------|-------------|
| Dynamic | `[slug]` | `/blog/hello` → `{ slug: 'hello' }` |
| Catch-all | `[...slug]` | `/docs/a/b` → `{ slug: ['a', 'b'] }` |
| Optional catch-all | `[[...slug]]` | `/shop` or `/shop/a/b` |
| Route group | `(name)` | No URL impact, layout grouping |
| Parallel route | `@slot` | Independent loading/error |
| Intercept same level | `(.)path` | Modal pattern |
| Private folder | `_folder` | Not a route |

| Navigation | Code | Use Case |
|------------|------|----------|
| Link | `<Link href="/path">` | Declarative nav |
| router.push | `router.push('/path')` | Programmatic nav |
| router.replace | `router.replace('/path')` | No history entry |
| redirect | `redirect('/path')` | Server redirect |

| Route Handler | Method | Pattern |
|---------------|--------|---------|
| `GET` | Read | `export async function GET() {}` |
| `POST` | Create | `export async function POST() {}` |
| `PUT` | Update | `export async function PUT() {}` |
| `DELETE` | Delete | `export async function DELETE() {}` |

## When to Use This Skill

Use for **advanced routing patterns**:
- Dynamic blog/product pages with slugs
- Documentation with catch-all routes
- Dashboard layouts with parallel routes
- Photo gallery modals with intercepting routes
- API endpoints with Route Handlers

**Related skills:**
- For App Router basics: see `nextjs-app-router`
- For middleware routing: see `nextjs-middleware`
- For data in routes: see `nextjs-data-fetching`

---

# Next.js Advanced Routing

## Dynamic Routes

### Single Dynamic Segment

```tsx
// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params;
  const post = await getPost(slug);

  return <article>{post.content}</article>;
}

// /blog/hello-world → { slug: 'hello-world' }
```

### Multiple Dynamic Segments

```tsx