Como criar rotas dinâmicas no Next.js: guia completo de roteamento, parâmetros e página dinâmica
4 min4 minutos de leitura
4 min4 minutos de leitura
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.
Autor(a)
Mateus Henrique
Desenvolvedor Front End na Alura
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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ê! ;)
