nextjs-dynamic-routes-params

Dynamic routes in Next.js App Router use bracketed folder names like [id] or [slug] to capture URL segments. Create a folder with brackets (e.g., app/[id]) and add page.tsx inside; the segment value becomes accessible via the params prop passed to your page component.

Access pathname parameters in server components by awaiting the params prop: `const params = await props.params; const id = params.id;`. This pattern works in page.tsx and layout.tsx files within dynamic route segments.

Catch-all routes use [...slug] and match one or more segments; optional catch-all routes use [...[slug]] and match zero or more segments, including the parent route itself. Both capture remaining URL parts as arrays in the params prop.

Yes, use the useParams() hook in client components to access dynamic route parameters. This provides the same params object available to server components, enabling client-side logic based on URL segments.

Use dynamic routes when URL segments represent variable data like product IDs or user slugs. Use static routes for fixed paths. Dynamic routes enable data-driven pages that respond to pathname changes without creating separate files for each value.

No special setup required; access route params directly in server components or layouts to fetch data conditionally. Pass the extracted parameter (e.g., id) to your data-fetching function, and Next.js handles caching and revalidation automatically.