ANÚNCIO

~/questoes/programacao

Como funciona o roteamento automático no Next.js?

Responda, confira o feedback e use o resultado para orientar sua revisão.
Aula de referência Projeto fullstack com Next.js para iniciantes
Para fixar

Como funciona o roteamento automático no Next.js

Conceito central

O Next.js utiliza a estrutura de pastas como convenção de roteamento, onde cada arquivo ou pasta criado dentro de 'pages' ou 'app' se transforma automaticamente em uma rota acessível. Isso elimina a necessidade de configurar rotas manualmente, acelerando o desenvolvimento e reduzindo erros.

Por que essa resposta faz sentido

Arquivos e pastas dentro de 'pages' ou 'app' automaticamente viram rotas acessíveis porque o Next.js implementa o padrão 'convenção sobre configuração'. Você cria uma pasta ou arquivo, e a estrutura de diretórios é mapeada diretamente para as URLs da sua aplicação, sem necessidade de código adicional.

Armadilhas comuns

  • Confundir Next.js com Express.js e achar que precisa de uma biblioteca externa para roteamento
  • Tentar criar um arquivo de configuração central para rotas, quando o Next.js usa pastas como convenção
  • Não entender que a estrutura de pastas é literal: uma pasta 'pages/produtos' cria a rota '/produtos', não é configurável

Entenda as alternativas

A

Express.js é uma biblioteca separada para backend, mas o Next.js não precisa dela para roteamento. O Next.js tem seu próprio sistema de roteamento automático integrado, sem dependência de Express.

B

Não existe um arquivo 'routes.config.js' no Next.js para centralizar rotas. O framework trabalha com a estrutura de pastas como fonte da verdade, dispensando arquivos de configuração para rotas.

C

O roteamento no Next.js é determinístico e baseado na estrutura de diretórios, não aleatório. As rotas são criadas consistentemente toda vez que você inicia o servidor, sempre refletindo a estrutura de pastas.

D

Esta é a resposta correta. A estrutura de pastas dentro de 'pages' ou 'app' é automaticamente convertida em rotas. Por exemplo, um arquivo 'pages/sobre.js' cria a rota '/sobre', e uma pasta 'pages/blog/[id].js' cria rotas dinâmicas como '/blog/1', '/blog/2', etc.

Dica prática: Teste criando um arquivo chamado 'pages/teste.js' com um componente React simples. Quando você salvar, a rota '/teste' estará disponível no navegador automaticamente. Veja por si mesmo como a estrutura de pastas vira URL sem nenhuma configuração extra.

Revise pensando: Se você criar uma pasta 'pages/api/usuarios' e colocar um arquivo 'index.js' dentro dela, qual será a URL acessível dessa rota?