nextjs-dynamic-routes-params

Community

Design dynamic routes and pathname handling.

Authormcclowes
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill guides when to implement dynamic route segments and how to access URL parameters via params, ensuring simple, maintainable routing structures and correct use of server/client boundaries.

Core Features & Use Cases

  • Dynamic routing: Create app/[id]/page.tsx for top-level IDs and nested/detailed routes when required.
  • Params handling: Access awaitable params in server components and use useParams in client components.
  • Catch-all routes: Implement [...slug] and optional catch-all patterns when needed.

Quick Start

Create a top-level dynamic route app/[id]/page.tsx to render content based on the ID in the URL, and use params via await params in server components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nextjs-dynamic-routes-params
Download link: https://github.com/mcclowes/puzzles/archive/main.zip#nextjs-dynamic-routes-params

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository