Agent skill · software engineering · wsimmonds
nextjs-pathname-id-fetch
Focused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server components to fetch data from APIs. Use when building pages that display individual items (product pages, blog posts, user profiles) based on a URL parameter. Complements nextjs-dynamic-routes-params with a simplified, common-case pattern.
Why this skill is useful
Provides a specific implementation pattern for dynamic routing and data fetching in Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
Next.js: Pathname ID Fetch Pattern When This Pattern Applies Use this pattern whenever a page needs to load data based on whatever identifier appears in the URL. Common scenarios include: Detail pages for products, posts, or users (/products/{id}, /blog/{slug}) Admin dashboards that drill into a selected resource (/admin/orders/{orderId}) Documentation or knowledge bases with nested paths (/docs/getting-started/installation) If the requirement says the data should change depending on the current URL path, the route segment must be dynamic (e.g., [id], [slug], [...slug]). The Pattern ✅ Recommended implementation ❌ Pitfall Complete Implementation Example File Structure URL Mapping: /123 → params = { id: '123' } /abc → params = { id: 'abc' } /product-xyz → params = { id: 'product-xyz' } Key Rules 1. Folder Name MUST Use Brackets 2. This is a Server Component (Default) 3. Params Must Be Awaited (Next.js 15+) 4. Keep It Simple - Don't Over-Nest Unless requirements explicitly call for /products/[id], keep the structure at the top level (app/[id]/page.tsx). TypeScript: NEVER Use any Type This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures. Common Variations Different Parameter Names Multiple Parameters Complete Working Example Quick Checklist Before shipping a pathname-driven detail page, confirm: [ ] The route folder uses brackets (e.g., app/[id]/page.tsx) [ ] The component stays server-side (no 'use client' needed) [ ] The params prop is typed as Promise<{ id: string }> for Next.js 15+ [ ] You await the params and read the identifier safely [ ] Data fetching logic uses that identifier [ ] Rendering handles loading/error states appropriately [ ] Types are explicit—never fall back to any When to Use the Comprehensive Skill Instead This micro-skill covers the simple "pathname ID fetch" pattern. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-pathname-id-fetch