nextjs-dynamic-routes-params_skill

Overview

This skill is a concise guide to building Next.js App Router dynamic routes and working with pathname parameters. It focuses on when to create dynamic segments, how to access params in Server/Client Components and route handlers, and how to avoid unnecessary route nesting. Use it to design clear, minimal route structures that match actual URL requirements.

How this skill works

The guide explains route folder syntax using bracketed segments (e.g., [id], [slug], [...slug]) and shows patterns for top-level, nested, and catch-all routes. It clarifies differences across Next.js versions (params as a Promise in Next.js 15+ vs synchronous earlier) and demonstrates accessing params in server components, route handlers, and client components via useParams or by passing data down. Examples include type-safe TypeScript patterns and common error handling like notFound().

When to use it

• When a page must render data tied to a URL segment (IDs, slugs, nested paths).
• When implementing catch-all or optional catch-all pages (e.g., docs or category trees).
• When deciding between top-level dynamic routes and explicit nested routes.
• When writing Server Components that need params (remember to await params in Next.js 15+).
• When building client-side components that need access to route parameters via useParams or prop passing.

Best practices

• Prefer the simplest route structure: use app/[id] unless the URL explicitly requires a prefix.
• Treat params as a Promise in Next.js 15+ and always await them in Server Components and route handlers.
• Don't access params directly in Client Components; use useParams() or accept params as props from a Server Component.
• Type params with TypeScript for reuse in pages, metadata generators, and searchParams.
• Handle missing or invalid IDs by checking fetch responses and calling notFound() for 404s.

Example use cases

• Top-level item page: app/[id]/page.tsx fetching item by ID and rendering details.
• Blog article: app/blog/[slug]/page.tsx with generateStaticParams for SSG.
• Nested resources: app/users/[userId]/posts/[postId]/page.tsx loading both user and post in parallel.
• Catch-all docs: app/docs/[...slug]/page.tsx resolving arbitrary nested paths.
• Optional category pages: app/shop/[[...slug]]/page.tsx that shows homepage when no segments are present.