Dynamic Routes

Core Idea

Dynamic Segments ([segmentName]) permitem criar rotas cujo path é preenchido em request time ou pré-renderizado em build time, sem conhecer os valores exatos antecipadamente.

Key Concepts

• Dynamic Segment: nome de arquivo/pasta entre colchetes, ex. [id], [slug]; acessível via useRouter().query.
• Catch-all Segments: [...segmentName] casa múltiplos segmentos subsequentes (/shop/a/b/c).
• Optional Catch-all Segments: [[...segmentName]] também casa a rota sem nenhum segmento adicional (/shop).

Code Examples

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

• O que demonstra: leitura de um Dynamic Segment (pages/blog/[slug].js) via useRouter().query.

Reference Tables

Route	Example URL	params
pages/blog/[slug].js	/blog/a	{ slug: 'a' }
pages/shop/[...slug].js	/shop/a/b	{ slug: ['a', 'b'] }
pages/shop/[[...slug]].js	/shop	{ slug: undefined }
pages/shop/[[...slug]].js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

Anti-patterns

• Confundir catch-all obrigatório com opcional: [...slug] NÃO casa a rota base (/shop dá 404); só [[...slug]] casa a rota sem segmentos.

Key Takeaways

1. Segmentos dinâmicos são sempre acessados via useRouter().query, nunca via props diretas da página no Pages Router.
2. Catch-all ([...slug]) captura array de segmentos; optional catch-all ([[...slug]]) adiciona o caso zero-segmentos.
3. Prerender de rotas dinâmicas exige getStaticPaths (não coberto nesta página, ver Data Fetching).

Connects To

• useRouter (API Reference): hook usado para acessar query com os valores do Dynamic Segment.
• getStaticPaths: define quais valores de segmento dinâmico são pré-renderizados em build time.
• Linking and Navigating: próximo passo recomendado pela própria página fonte.