Roteamento eficiente com Next.js: descobrindo o App Router
12 min12 minutos de leitura
12 min12 minutos de leitura
No mundo frontend, o roteamento é um pedaço crucial do que fazemos. Um pilar, eu diria. Seja com bibliotecas top como o React Router Dom ou até mesmo usando frameworks bacanas como o .
Autor(a)
Vinicios Neves
Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Portugal e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.
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.
E falando de Next, sabia que ele agora dá a opção de escolher entre dois roteadores? Temos o App Router para as aplicações que estão no ritmo e usam o Next a partir da versão 13, e o Page Router para a galera que tá na versão 12 ou anterior.
Vou te contar nesse artigo tudo sobre o App Router: como ele tá funcionando, as ideias chaves e o que ele tem de legal. Bora mergulhar nisso?
Primeiro, antes de mais nada, a gente precisa ficar por dentro dos termos que estão rolando por aí. Então, segura essa lista rápida:
Tree (Árvore): Uma maneira de visualizar uma estrutura hierárquica. Tipo uma árvore de componentes com componentes pais e filhos, uma estrutura de pastas, e por aí vai.
Subtree (Subárvore): Uma parte dessa árvore, começando em uma nova raiz (o primeiro) e terminando nas folhas (os últimos).
Root (Raiz): O primeiro nó em uma árvore ou subárvore, como um layout raiz.
Leaf (Folha): Nós de uma subárvore que não têm filhos, como o último segmento em um caminho de URL.
URL Segment (Segmento de URL): Uma parte do caminho da URL delimitado por barras.
URL Path (Caminho de URL): Aquela parte da URL que vem depois do domínio (e é composta por segmentos).
Com isso em mente, fica mais fácil entender o que vem pela frente. Detalhe: eu não vou usar esses termos traduzidos porque isso pode dificultar o uso da documentação no futuro, tá bem?
O roteador
O App Router foi construído em cima dos Server Side Components (componentes do lado do servidor) do React. Isso significa que agora temos suporte a layouts compartilhados, roteamento aninhado, estados de carregamento, tratamento de erros e muito mais!
Esse roteador funciona em um novo diretório chamado "app" (daí o nome "App Router"). Se você está migrando do Page Router para o App Router, esse diretório "app" trabalha em conjunto com o diretório "pages", permitindo uma adoção gradativa. Assim, você pode incorporar gradualmente as novas funcionalidades em algumas rotas da sua aplicação, enquanto mantém outras rotas no diretório "pages", conforme estava acostumado.
Uma dica importante: O App Router tem prioridade sobre o Page Router. Por isso, tenha atenção para não criar rotas nos dois diretórios que levam ao mesmo caminho URL. Fazendo isso, você vai receber um erro durante a compilação, para evitar conflitos.
Por padrão, os componentes dentro do diretório "app" são Server Components. Isso não só otimiza o desempenho, como também facilita a sua vida na hora de adotá-los. Ah, e não se esqueça: você ainda pode usar Client Components normalmente.
Se você é novo no conceito de Server Components, sugiro dar uma olhada na documentação. Vai te ajudar a entender melhor essa novidade!
Entendendo as funções de pastas e arquivos no Next.js
O Next usa um roteador baseado em sistema de arquivos onde:
Pastas definem as rotas: Imagine as pastas como os caminhos que você segue para chegar a algum lugar. No Next.js, uma rota é como uma trilha formada por pastas aninhadas, que começa na pasta raiz (root) e vai até uma última pasta, que chamaremos de "folha". Dentro dessa pasta "folha", você encontrará um arquivo chamado page.js.
Arquivos são os responsáveis pela aparência: Depois de seguir a trilha (ou seja, a rota), você chega a um destino, certo? No nosso caso, esse destino é o que o usuário vai ver na tela. E quem define essa aparência é o arquivo dentro da pasta. Cada arquivo cria a interface do usuário (UI) para um segmento da rota.
O que é um segmento de Rota?
Imagine cada pasta no seu projeto como um pedacinho do endereço que aparece na barra de navegação do navegador. A cada pasta, acrescentamos um pedaço ao endereço, e chamamos esse pedaço de "segmento de rota". Esse segmento corresponde exatamente ao que você vê na URL.
Rotas aninhadas
Se você quer criar uma rota que tenha várias partes, basta colocar uma pasta dentro da outra. Por exemplo, se quiser que seu site tenha um endereço como "/painel/configurações", é só criar uma pasta "painel" e, dentro dela, uma pasta "configurações" no diretório principal.
Então, para o endereço /painel/configuracoes, temos:
/ (segmento root, sempre estará lá)
painel (segmento)
configuracoes (o segmento leaf)
Assim, as pastas vão construindo o caminho que vemos na barra de endereços.
Convenções de arquivos no Next.js
Se você está se aventurando pelo Next.js, saiba que ele tem alguns arquivos com nomes bem específicos. Esses arquivos ajudam a criar interfaces com comportamentos diferentes dentro das rotas aninhadas. Aqui vai um resuminho para você:
layout: Define a interface compartilhada para um segmento e seus subsegmentos. Pense nisso como um layout comum que envolve várias páginas.
page: É a estrela do show! Representa a interface única de uma rota e faz com que as rotas sejam acessíveis ao público.
loading: A interface que aparece enquanto uma página ou segmento está carregando.
not-found: A tela que é mostrada quando um segmento ou sua página filha não são encontrados.
error: Mostra erros que acontecem em um segmento específico ou em suas páginas filhas.
global-error: A tela de erro universal, para falhas gerais.
route: Representa um endpoint de API no lado do servidor.
template: É uma versão especial do layout que pode ser re-renderizada com diferentes conteúdos.
default: Uma interface padrão para rotas paralelas.
Dica rápida: Você pode usar as extensões .js, .jsx ou .tsx para esses arquivos especiais.
Hierarquia de componentes
Ao navegar pelo Next.js, é fundamental entender como os componentes React são renderizados em uma ordem específica. Quando falamos dos arquivos especiais de um segmento de rota, a sequência é mais ou menos assim:
layout.js: Pensa nisso como o cenário principal.
template.js: Um tipo de layout, mas que pode ser customizado de diferentes formas.
error.js: Uma espécie de "salva-vidas" para os erros do React.
loading.js: Atua quando o React está "à espera" de algo, graças ao Suspense.
not-found.js: Outro "salva-vidas", mas para quando algo não é encontrado.
page.js ou layout.js aninhados: Aqui temos a estrela principal da rota ou outro cenário que se aninha dentro do principal.
" contém "
