---

name: nextjs-pathname-id-fetch

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Fetch data using URL parameter. Create app/[id]/page.tsx, await params to get ID, fetch API, render. Server Component (no 'use client'). allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Next.js: Pathname ID Fetch Pattern

Quick Start

Dynamic route folder: app/[id]/page.tsx → URL segment accessible as params

Copy// app/[id]/page.tsx
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;  // Next.js 15+: await params
  const product = await fetch(`https://api.example.com/products/${id}`)
    .then(r => r.json());
  return <div><h1>{product.name}</h1></div>;
}

Reference Files

• pattern.md - Full implementation, parameter names, multiple parameters

Notes

• Server Component (default): No 'use client' needed
• Keep structure simple: Use app/[id]/ unless explicitly told otherwise
• Last verified: 2025-01-11