🎯 Aula 02

📁 Estrutura do Projeto

Entenda a anatomia completa de um projeto Next.js e como cada arquivo contribui para a funcionalidade da aplicação.

20 minutos

Nível: Iniciante

Por que isso é importante

Uma estrutura bem organizada pode reduzir bugs em 45% e acelerar o desenvolvimento em60%. Projetos Next.js seguindo convenções oficiais são 3x mais fáceisde manter e escalar, resultando em menos refatorações e maior produtividade da equipe.

Conceitos Arquiteturais Essenciais

App Router vs Pages Router:

App Router (app/) é a nova arquitetura baseada em Server Components. Pages Router (pages/) é o sistema legado ainda suportado.

File-System Based Routing:

As rotas são definidas pela estrutura de pastas. Cada pasta com page.tsx vira uma rota automaticamente.

Colocation Pattern:

Arquivos relacionados ficam próximos. Componentes, estilos e testes da mesma feature ficam na mesma pasta.

Convention over Configuration:

Next.js usa convenções de nomes (page.tsx, layout.tsx, loading.tsx) para funcionalidades específicas.

Diretório src/app/ - Coração da Aplicação

🏗️ Arquivos Especiais

layout.tsx

Define o layout compartilhado entre páginas. Contém HTML, head, body e componentes reutilizáveis.

page.tsx

Define uma página acessível publicamente. O conteúdo único de cada rota.

loading.tsx

UI de carregamento instantâneo mostrada enquanto a página carrega.

error.tsx

UI de erro que captura erros em runtime e permite recovery.

📋 Exemplo Prático

src/app/layout.tsx

Organização de Componentes

🎨 Estrutura Recomendada

src/components/

ui/- Componentes base

Button.tsx

Card.tsx

Modal.tsx

Header.tsx- Layout

Footer.tsx

Sidebar.tsx

🔧 Boas Práticas

PascalCase: Nome dos componentes
Single Responsibility: Um componente, uma função
Colocation: Arquivos relacionados juntos
Barrel Exports: index.ts para re-exports
TypeScript First: Sempre use .tsx

Arquivos de Configuração Essenciais

⚙️ package.json

Define dependências, scripts e metadados do projeto:

package.json

🔧 next.config.js

Configurações avançadas do Next.js:

next.config.js

Vantagens desta Estrutura

🚀 Performance:
App Router otimiza automaticamente o carregamento
🧠 Intuitiva:
Estrutura de pastas espelha as rotas da aplicação
🔧 Flexível:
Permite co-location de arquivos relacionados

🔍 Escalável:
Fácil de navegar mesmo em projetos grandes
🛠️ Padrão:
Segue convenções oficiais do Next.js
⚡ Produtiva:
Reduz tempo para encontrar e modificar código

O que Você Conquistou

🎉 Excelente! Agora você domina completamente a estrutura de um projeto Next.js e sabe onde cada arquivo deve ficar.

✅ Anatomia completa de um projeto Next.js moderno
✅ App Router e arquivos especiais (layout, page, loading, error)
✅ Organização de componentes seguindo melhores práticas
✅ Configurações essenciais do Next.js e TypeScript
✅ Convenções de nomenclatura e estruturação de código

Próxima aula