Nextjs Dynamic Routes Params

Handles Next.js App Router dynamic routes where you need URL segments to drive what renders. The big thing here is it pushes you toward simple structures by default. Instead of jumping to app/products/[id] for product pages, it defaults to app/[id] unless the URL structure explicitly requires nesting. Also covers the Next.js 15 breaking change where params became a Promise, so you'll see the await params pattern throughout. Useful when you're building detail pages, blog posts, or anything that fetches data based on an identifier in the path. The route structure decision tree is genuinely helpful for avoiding over-engineered folder hierarchies.

skills.sh installs: 304
GitHub stars: 110
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wsimmonds/claude-nextjs-skills --skill nextjs-dynamic-routes-params --agent claude-code

Installs into .claude/skills of the current project.

Files

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;

SKILL.md on GitHub