# Handling Dynamic Routing

> Logic for Next.js 15 Dynamic Routes. Use when building pages like `tours/[id]`.

- Skill: `majiayu000/handling-dynamic-routing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/handling-dynamic-routing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/handling-dynamic-routing/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/handling-dynamic-routing

---


# Dynamic Routing Patterns

## When to use this skill
- Creating pages that depend on a parameter (slug, ID).
- Handling `params` in Next.js 15 Server Components.

## Workflow (Next.js 15)
- [ ] Define the folder: `app/tours/[id]/page.tsx`.
- [ ] Access `params` as a **Promise** (required in v15).
- [ ] Fetch data based on the resolved `id`.

## Implementation
```typescript
interface TourPageProps {
    params: Promise<{ id: string }>;
}

export default async function TourDetailsPage({ params }: TourPageProps) {
    const { id } = await params; // Await the promise
    const tour = await TourService.getById(id);
    
    return (
        <main>
            <h1>{tour.title}</h1>
            {/* ... */}
        </main>
    );
}
```

## Instructions
- **Metadata**: Await `params` in `generateMetadata` as well.
- **Loading**: Use `loading.tsx` in the directory for automatic fallback UI.