nextjs-pathname-id-fetch_skill

Overview

This skill documents a focused Next.js pattern for fetching data based on URL parameters. It explains creating dynamic route folders like [id] or [slug], accessing route params in server components, and using that identifier to fetch and render item details. The guidance targets common detail pages such as products, posts, and profiles.

How this skill works

Create a dynamic route folder (for example app/[id]/page.tsx), implement a server component, await the params object (Next.js 15+), extract the identifier, and call your API using that value. Return rendered JSX with the fetched data and handle missing or error responses appropriately. Keep the component server-side—do not add 'use client'.

When to use it

• Building product, blog post, or user profile detail pages that rely on a URL identifier
• Admin or dashboard pages that drill into a single resource via an ID in the path
• Simple routing cases where a single dynamic segment (e.g., [id] or [slug]) provides the required context
• When you need server-side data fetching tied directly to the current pathname
• When you want a minimal, predictable routing structure without catch-all complexity

Best practices

• Name dynamic folders with brackets: app/[id]/page.tsx (no brackets = static route)
• Keep the page a server component and await params for Next.js 15+: const { id } = await params
• Type params precisely (e.g., Promise<{ id: string }>) and avoid using any
• Use fetch with cache control (e.g., { cache: 'no-store' }) when up-to-date data is required
• Handle fetch failures and render clear loading/error states in the UI

Example use cases

• Product detail page at /products/123 implemented as app/[id]/page.tsx fetching /api/products/123
• Blog post page at /blog/my-slug implemented as app/[slug]/page.tsx fetching the post by slug
• Admin order view at /admin/orders/ord-456 implemented as app/[orderId]/page.tsx loading order details
• Simple docs lookup where a doc id in the path maps to a single API call and render
• User profile page at /users/alice implemented using a dynamic [username] folder and server fetch