nextjs-dynamic-routes-params

Next.js Dynamic Routes and Pathname Parameters

When to Use This Skill

Use this skill when:

• Creating dynamic route segments (e.g., blog/[slug], users/[id])
• Accessing URL pathname parameters in Server or Client Components
• Building pages that fetch data based on route parameters
• Implementing catch-all or optional catch-all routes
• Working with the params prop in page.tsx, layout.tsx, or route.ts

⚠️ RECOGNIZING WHEN YOU NEED DYNAMIC ROUTES

Look for requirements that tie data to the URL path.

Create a dynamic segment ([param]) whenever the UI depends on part of the pathname. Typical signals include:

• Details pages that reference “the item’s ID/slug from the URL”
• Copy that calls out path segments (e.g., /products/{id}, /blog/{slug})
• Requirements to fetch data “based on whichever resource is being visited”
• Navigation flows where one page links to /something/{identifier}

✅ Dynamic route response

Requirement: display product information based on whichever ID appears in the URL
Implementation: app/[id]/page.tsx
Access parameter with: const { id } = await params;

❌ Static-page response

Implementation: app/page.tsx  ← cannot access per-path identifiers

Example requirements that lead to dynamic routes

1. “Show a product page that loads whichever product ID appears in the URL” → app/[id]/page.tsx or app/products/[id]/page.tsx
2. “Render a blog article based on its slug” → app/blog/[slug]/page.tsx or app/[slug]/page.tsx
3. “Support nested docs such as /docs/getting-started/installation” → app/docs/[...slug]/page.tsx

Core rule: If data varies with a URL segment, the folder name needs matching brackets.

⚠️ CRITICAL: Avoid Over-Engineering Route Structure

MOST COMMON MISTAKE: Adding unnecessary nesting to routes.

Default Rule: When creating a dynamic route, use app/[id]/page.tsx or app/[slug]/page.tsx unless:

• The URL structure is explicitly specified (e.g., "create route at /products/[id]")
• You're building multiple resource types that need namespacing
• The requirements clearly show a nested URL structure