Next.jseasy

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

Tagi

#routing#dynamic-route#params

Odpowiedź

Tworzysz folder np. `app/posts/[id]/page.tsx`. W Server Component czytasz z props `params`, a w Client Component możesz użyć `useParams()`.

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

Odpowiedź zaawansowana

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.

Powiązane pytania

Next.js

Middleware w Next.js: do czego się nadaje i jakie ma ograniczenia?

#nextjs#middleware#edge

Next.js

Route Groups `(group)`: co to jest i po co się je stosuje?

#nextjs#routing#route-groups

Next.js

Do czego służą `useSearchParams()` i `useParams()` (i gdzie można ich używać)?

#params#search-params