Jak zrobić dynamiczny route w App Router i odczytać params?

Głębiej

W App Router nazwa folderu definiuje trasę:

• `app/posts/[id]/page.tsx` pasuje do `/posts/123`
• `app/posts/[...slug]/page.tsx` to catch-all (np. `/posts/a/b/c`)
• `app/posts/[[...slug]]/page.tsx` to optional catch-all (pasuje też do `/posts`)

W Server Component `page.tsx` Next przekazuje params w props `params`.

Przykład

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

Odczyt po stronie klienta:

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

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

Generowanie statyczne

Dla SSG/ISR możesz wyliczyć dynamiczne parametry przez `generateStaticParams()`.

Typowe pułapki

• Traktowanie params jako liczby bez parsowania/walidacji.
• Użycie `useParams()` w Server Component.
• Zapominanie, że catch-all daje tablicę segmentów.