Melhores Práticas do Next.js
Princípios para desenvolvimento com o Next.js App Router.
1. Componentes de Servidor vs. Cliente
Árvore de Decisão
O componente precisa de...?
│
├── useState, useEffect, event handlers
│ └── Componente Cliente ('use client')
│
├── Busca direta de dados, sem interatividade
│ └── Componente de Servidor (padrão)
│
└── Ambos?
└── Dividir: Servidor pai + Cliente filho
Por Padrão
| Tipo | Uso |
|---|
| Servidor | Busca de dados, layout, conteúdo estático |
| Cliente | Formulários, botões, UI interativa |
2. Padrões de Busca de Dados
Estratégia de Fetch
| Padrão | Uso |
|---|
| Padrão | Estático (armazenado em cache na build) |
| Revalidate | ISR (atualização baseada em tempo) |
| No-store | Dinâmico (a cada requisição) |
Fluxo de Dados
| Origem | Padrão |
|---|
| Banco de dados | Fetch no Componente de Servidor |
| API | fetch com cache |
| Entrada do usuário | Estado no cliente + server action |
3. Princípios de Roteamento
Convenções de Arquivo
| Arquivo | Propósito |
|---|
page.tsx | UI da rota |
layout.tsx | Layout compartilhado |
loading.tsx | Estado de carregamento |
error.tsx | Limite de erro |
not-found.tsx | Página 404 |
Organização de Rotas
| Padrão | Uso |
|---|
Grupos de rota (nome) | Organizar sem alterar a URL |
Rotas paralelas @slot | Múltiplas páginas no mesmo nível |
Interceptação (.) | Sobreposições de modal |
4. Rotas de API
Manipuladores de Rota
| Método | Uso |
|---|
| GET | Ler dados |
| POST | Criar dados |
| PUT/PATCH | Atualizar dados |
| DELETE | Remover dados |
Melhores Práticas
- Validar entrada com Zod
- Retornar códigos de status adequados
- Lidar com erros graciosamente
- Usar o Edge runtime quando possível
5. Princípios de Performance
Otimização de Imagens
- Usar componente next/image
- Definir prioridade para conteúdo acima da dobra
- Fornecer blur placeholder
- Usar tamanhos responsivos
Otimização de Bundle
- Importações dinâmicas para componentes pesados
- Divisão de código baseada em rotas (automática)
- Analisar com ferramenta de análise de bundle
6. Metadados
Estáticos vs. Dinâmicos
| Tipo | Uso |
|---|
| Exportação estática | Metadados fixos |
| generateMetadata | Dinâmico por rota |
Tags Essenciais
- title (50-60 caracteres)
- description (150-160 caracteres)
- Imagens Open Graph
- URL canônica
7. Estratégia de Cache
Camadas de Cache
| Camada | Controle |
|---|
| Requisição | Opções do fetch |
| Dados | revalidate/tags |
| Rota completa | Configuração de rota |
Revalidação
| Método | Uso |
|---|
| Baseada em tempo | revalidate: 60 |
| Sob demanda | revalidatePath/Tag |
| Sem cache | no-store |
8. Server Actions
Casos de Uso
- Submissões de formulário
- Mutações de dados
- Gatilhos de revalidação
Melhores Práticas
- Marcar com 'use server'
- Validar todas as entradas
- Retornar respostas tipadas
- Tratar erros
9. Anti-Padrões
| ❌ Não Faça | ✅ Faça |
|---|
| 'use client' em toda parte | Servidor por padrão |
| Fetch em componentes cliente | Fetch no servidor |
| Pular estados de carregamento | Usar loading.tsx |
| Ignorar limites de erro | Usar error.tsx |
| Grandes bundles no cliente | Importações dinâmicas |
10. Estrutura do Projeto
app/
├── (marketing)/ # Grupo de rota
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Layout do dashboard
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
Lembre-se: Componentes de Servidor são o padrão por um motivo. Comece por eles, adicione cliente apenas quando necessário.