Rotas dinâmicas e slugs no Next.js: Guia do desenvolvedor

O Next.js usa roteamento baseado no sistema de arquivos com sintaxe de colchetes para segmentos dinâmicos: [slug].

Rota dinâmica básica

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

Gerar parâmetros estáticos

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Rotas catch-all

[...slug] corresponde a /a/b/c. [[...slug]] também corresponde à raiz.

Gere slugs

Use nosso gerador de slugs URL ou o conversor para kebab-case.