Next.jseasy

How do you define a dynamic route in App Router and read params?

Answer

Create a folder like `app/posts/[id]/page.tsx`. In a Server Component, read it from the `params` prop; in a Client Component you can use `useParams()`.

export default function Page({ params }: { params: { id: string } }) {
  return <div>Post id: {params.id}</div>
}

Advanced answer

Deep dive

In the App Router, folder names define routes:

`app/posts/[id]/page.tsx` matches `/posts/123`
`app/posts/[...slug]/page.tsx` is a catch-all (e.g., `/posts/a/b/c`)
`app/posts/[[...slug]]/page.tsx` is an optional catch-all (also matches `/posts`)

In a Server Component `page.tsx`, Next passes params via the `params` prop.

Example

// app/posts/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
  return <div>Post id: {params.id}</div>
}

Client-side reading:

'use client'
import { useParams } from 'next/navigation'

export default function PostClient() {
  const params = useParams<{ id: string }>()
  return <div>{params.id}</div>
}

Static generation

For SSG/ISR you can precompute dynamic params with `generateStaticParams()`.

Common pitfalls

Treating params as numbers without parsing/validation.
Using `useParams()` in a Server Component.
Forgetting catch-all params are arrays of segments.