Agent skill · software engineering · wsimmonds
nextjs-dynamic-routes-params
Guide for Next.js App Router dynamic routes and pathname parameters. Use when building pages that depend on URL segments (IDs, slugs, nested paths), accessing the `params` prop, or fetching resources by identifier. Helps avoid over-nesting by defaulting to the simplest route structure (e.g., `app/[id]` instead of `app/products/[id]` unless the URL calls for it).
Why this skill is useful
Provides specific patterns for dynamic routing in Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
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 ❌ Static-page response 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-dynamic-routes-params