Como criar rotas dinâmicas no Next.js: guia completo de roteamento, parâmetros e página dinâmica

O sistema de rotas do Next.js é baseado em pastas e arquivos. Em algum momento durante o desenvolvimento, pode surgir a dúvida: como criar rotas dinâmicas? Neste artigo, vamos explicar o que são rotas dinâmicas, por que são importantes e como utilizá-las na prática. 

O que são rotas dinâmicas no Next.js e quando usá-las? 

Rotas dinâmicas no Next.js são rotas cuja definição não é feita de forma estática, diferentemente de, por exemplo, uma rota /sobre, na qual é necessário acessar exatamente esse caminho para visualizar a página. 

Um exemplo prático é o acesso a uma postagem específica: a URL geralmente contém um id correspondente a essa postagem. 

Portanto, as rotas dinâmicas são utilizadas quando necessitamos receber algum parâmetro por meio da URL, para, por exemplo fazer uma requisição a uma API e assim trazer os dados do post que esse usuário decidiu ler. 

Como criar rotas dinâmicas no Next.js (app router e pages router) 

Para definir rotas dinâmicas no Next.js, utilizamos colchetes nos nomes dos arquivos dentro da pasta de rotas. Por exemplo, [param].js, onde param é o nome do parâmetro recebido pela rota. 

Vejamos o seguinte exemplo: 

No exemplo acima, há um arquivo chamado [id].js dentro da pasta posts, onde id é o parâmetro capturado pela rota. A seguir, vamos criar uma página simples que exibe um 'Hello World'. (Lembre-se: toda página no Next.js precisa ter uma exportação padrão.) 

Dessa forma, ao acessar /posts/teste, será exibida a página criada. Isso vale para qualquer parâmetro colocado no lugar de teste: 

Como pegar parâmetro da URL no Next.js (id, slug e outros) 

Para acessar o valor do parâmetro dinâmico da rota (como id ou slug), você pode usar o hook useRouter (em versões com pages router) ou o useParams (no app router a partir do Next.js 13). Ambas as abordagens permitem recuperar parâmetros de URLs dinâmicas, facilitando o consumo de dados em páginas dinâmicas Next.js.

Veja exemplos de como pegar o id da rota no Next.js ou passar parâmetros entre páginas. 

Esse padrão facilita quem deseja criar uma página de produto no Next.js com base no id ou slug do item; importante para aplicações de e-commerce ou blogs. 

Com isso, é possível, por exemplo, ter uma lista de posts: ao clicar em um deles, a aplicação direciona para uma rota dinâmica que contém o id do post. Então, é possível fazer uma requisição para uma API e exibir os dados específicos daquele post.

Essa abordagem amplia bastante as possibilidades de navegação. 

Resumo: como criar rotas dinâmicas no Next.js e boas práticas 

Se você chegou até aqui, deve ter percebido quão simples e poderoso é criar rotas com o Next.js.

Ele nos permite definir rotas dinâmicas para termos uma maior flexibilidade na hora de criar páginas, onde basta criar um arquivo com o nome em colchetes ( [param].js ) e acessar essa rota dinamicamente no nosso navegador.  

Assim, ao obter a rota acessada, é possível tratá-la da forma desejada com o hook useRouter (importado de 'next/router'), que nos fornece uma propriedade query que também possui uma propriedade com o nome do parâmetro escolhido entre colchetes. 
Se quiser praticar e evoluir mais, confira nossa Formação Next.js na Alura para aprender Next.js desde básico até projetos avançados com roteamento dinâmico

Nota importante (2026): este artigo aborda o Pages Router do Next.js. Para projetos novos iniciados em 2026, a Vercel recomenda o uso do App Router (diretório app/), que utiliza convenções diferentes: pastas com colchetes para rotas dinâmicas ([slug]/page.tsx) e acesso aos parâmetros via props ou hook useParams de 'next/navigation'. O Pages Router continua suportado, mas em modo de manutenção. 

Se interessou e quer saber mais? Abaixo estão alguns links que podem ser úteis e interessantes para você! ;) 

• Documentação do Next.Js referênte a rotas dinâmicas 
• Video ensinando como gerar rotas dinâmicas e estáticas com Next.Js