App Router do Next.js: o que muda na forma de montar um site
O App Router é o sistema de rotas que o Next.js adotou a partir da versão 13. Ele convive com o antigo Pages Router, mas é nele que as novidades do framework acontecem. A ideia central é simples: a estrutura de pastas dentro de `app/` é o mapa do site.
Pastas são rotas, arquivos são papéis
Uma pasta cria um segmento da URL; os arquivos dentro dela dizem o que acontece naquele segmento. Os mais usados são:
page.tsx: o conteúdo da rota. Sem ele, a pasta não vira uma página acessível.layout.tsx: a moldura que envolve a página e todas as rotas filhas.loading.tsx: o que aparece enquanto a página carrega dados.not-found.tsxeerror.tsx: as telas de 404 e de erro daquele trecho do site.
Assim, app/blog/[slug]/page.tsx atende /blog/qualquer-coisa, e o valor de slug chega à página como parâmetro.
Layouts que não recarregam
Um layout é renderizado uma vez e preservado na navegação entre as páginas que ele envolve. Cabeçalho, menu lateral e rodapé mantêm o estado e não são refeitos a cada clique. No Pages Router, conseguir o mesmo efeito exigia contornos no _app.
Grupos de rotas
Uma pasta entre parênteses, como (publico), organiza arquivos sem aparecer na URL. Com isso, o site público e o painel administrativo podem ter layouts completamente diferentes, lado a lado, na mesma aplicação.
Vale migrar?
Para um projeto novo, o App Router é o ponto de partida recomendado. Para um projeto existente, a migração pode ser gradual: as duas pastas funcionam juntas, e dá para mover uma rota de cada vez.