Melhores Práticas do Next.js

Princípios para o desenvolvimento do Next.js App Router.

1. Componentes de Servidor vs. Cliente

Árvore de Decisão

Does it need...?
│
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│   └── Server Component (default)
│
└── Both? 
    └── Split: Server parent + Client child

Por Padrão

2. Padrões de Busca de Dados

Estratégia de Busca

Fluxo de Dados

3. Princípios de Roteamento

Convenções de Arquivo

Organização de Rotas

4. Rotas de API

Manipuladores de Rota

Melhores Práticas

• Valide a entrada com Zod
• Retorne códigos de status apropriados
• Lide com erros de forma graciosa
• Use o runtime Edge quando possível

5. Princípios de Desempenho

Otimização de Imagem

• Use o componente next/image
• Defina priority para acima da dobra (above-the-fold)
• Forneça um placeholder de blur
• Use tamanhos responsivos

Otimização de Bundle

• Importações dinâmicas para componentes pesados
• Divisão de código baseada em rota (automática)
• Analise com o 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. Ações do Servidor

Casos de Uso

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

Melhores Práticas

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

9. Anti-Padrões

10. Estrutura do Projeto

app/
├── (marketing)/     # Route group
│   └── page.tsx
├── (dashboard)/
│   ├── layout.tsx   # Dashboard layout
│   └── 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.

Quando Usar

Esta habilidade é aplicável para executar o fluxo de trabalho ou as ações descritas na visão geral.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.