nextjs-pathname-id-fetch

SKILL.md

Use this pattern whenever a page needs to load data based on whatever identifier appears in the URL. Common scenarios include:

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]).

Unless requirements explicitly call for /products/[id], keep the structure at the top level (app/[id]/page.tsx).

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. Source: wsimmonds/claude-nextjs-skills.

View raw