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

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.