Nextjs Best Practices

Melhores Práticas Next.js

Princípios para desenvolvimento com Next.js App Router.

1. Server vs Client Components

Árvore de Decisão

Precisa de...?
│
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
│
├── Busca de dados direta, sem interatividade
│   └── Server Component (padrão)
│
└── Ambos? 
    └── Divida: Server pai + Client filho

Por Padrão

2. Padrões de Busca de Dados

Estratégia de Fetch

Fluxo de Dados

3. Princípios de Roteamento

Convenções de Arquivo

Organização de Rotas

4. API Routes

Route Handlers

Melhores Práticas

• Valide entrada com Zod
• Retorne status codes apropriados
• Trate erros com elegância
• Use Edge runtime quando possível

5. Princípios de Performance

Otimização de Imagens

• Use componente next/image
• Configure priority para acima da dobra
• Forneça placeholder blur
• Use sizes responsivos

Otimização de Bundle

• Imports dinâmicos para componentes pesados
• Code splitting baseado em rotas (automático)
• Analise com bundle analyzer

6. Metadados

Estático vs Dinâmico

Tags Essenciais

• title (50-60 caracteres)
• description (150-160 caracteres)
• Imagens Open Graph
• URL canônica

7. Estratégia de Cache

Camadas de Cache

Revalidação

8. Server Actions

Casos de Uso

• Submissões de formulário
• Mutações de dados
• Triggers de revalidação

Melhores Práticas

• Marque com 'use server'
• Valide todas as entradas
• Retorne respostas tipadas
• Trate erros

9. Anti-Padrões

10. Estrutura de Projeto

app/
├── (marketing)/     # Route group
│   └── page.tsx
├── (dashboard)/
│   ├── layout.tsx   # Dashboard layout
│   └── page.tsx
├── api/
│   └── [resource]/
│       └── route.ts
└── components/
    └── ui/

Lembre-se: Server Components são o padrão por um motivo. Comece por lá e adicione client apenas quando necessário.