(NextJS) - Estrutura de rotas no diretório App Router

Neste vídeo, exploramos o sistema de rotas baseado em arquivos do Next.js usando o App Router, a forma moderna de gerenciamento de rotas introduzida na versão 13.

Conceitos Fundamentais

Next.js oferece dois sistemas de roteamento:

• App Router (novo padrão a partir da versão 13)
• Pages Router (sistema tradicional)

Ambos utilizam a arquitetura baseada em arquivos, onde a estrutura de pastas define as rotas da aplicação.

Criando Rotas Básicas

Passo a passo para criar novas rotas:

1. Crie uma pasta dentro do diretório app
2. Adicione um arquivo page.tsx (ou page.jsx)
3. Exporte um componente React como default

1// app/detalhes/page.tsx 
2 export default function Detalhes() {
3 return <h1>Hello from Detalhes</h1>
4 }

Esta rota ficará acessível em /detalhes

Regras Importantes

• O arquivo deve se chamar page.tsx (case sensitive)
• Pastas sem arquivo page.tsx não são acessíveis via URL
• Subpastas criam rotas aninhadas automaticamente

Exemplo de Rotas Aninhadas

Estrutura de arquivos:

1app/
2 detalhes/
3    usuario/ 
4       page.tsx   # rota: /detalhes/usuario 
5     page.tsx      # rota: /detalhes 
6 page.tsx         # rota: /

Página 404 Personalizada

Para criar uma página de "não encontrado":

1. Crie um arquivo not-found.tsx no diretório app
2. Exporte um componente React personalizado

1// app/not-found.tsx
2 export default function NotFound() {
3 return <h1>Página 404 não encontrada</h1>
4 }

Considerações Finais

O App Router do Next.js oferece:

• Sistema de rotas intuitivo baseado em arquivos
• Estrutura organizada e escalável
• Facilidade para criar páginas aninhadas
• Personalização de páginas de erro

Este sistema é fundamental para construir aplicações Next.js modernas e será a base para os próximos conceitos avançados.