Tech Talks
Aqui eu compartilho o que aprendi durante minha jornada como desenvolvedor full-stack. Este é meu espaço para discutir boas práticas reais, padrões de design que realmente funcionam, organização de projetos e tudo que considero essencial para escrever código de qualidade. Meu objetivo é ser prático e honesto: trazer soluções que eu uso no dia a dia e que fizeram diferença na minha carreira. Se você quer aprimorar suas skills e entender melhor as decisões por trás do bom desenvolvimento, você está no lugar certo.
Arquitetura de Pastas: Next.js 15 vs Vite + React 18
Next.js 15 - App Router Architecture
Arquitetura escalável para Next.js 15 com App Router
Estrutura de Pastas
src/ ├── app/ # App Router - Routing principal │ ├── layout.tsx # Layout raiz │ ├── page.tsx # Home page │ ├── (auth)/ # Route group (não afeta URL) │ │ ├── login/page.tsx │ │ └── register/page.tsx │ ├── dashboard/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── [id]/page.tsx # Dynamic routes │ └── api/ # API Routes │ └── users/route.ts ├── components/ │ ├── ui/ # Componentes reutilizáveis │ │ ├── Button/ │ │ │ ├── Button.tsx │ │ │ ├── Button.test.tsx │ │ │ └── index.ts │ │ ├── Card/ │ │ ├── Modal/ │ │ └── index.ts # Barrel exports │ ├── layout/ # Componentes de layout │ │ ├── Header/ │ │ ├── Footer/ │ │ └── Sidebar/ │ └── features/ # Componentes específicos de features │ ├── Auth/ │ └── Dashboard/ ├── lib/ # Lógica complexa e integrações │ ├── db.ts # Database connection │ ├── auth.ts # Auth service │ └── api-client.ts ├── server/ # Server-side logic │ ├── actions/ # Server actions │ │ └── user.actions.ts │ └── services/ │ ├── user.service.ts │ └── email.service.ts ├── hooks/ # Custom React hooks │ ├── useAuth.ts │ ├── useFetch.ts │ └── index.ts ├── utils/ # Utility functions │ ├── formatters.ts │ ├── validators.ts │ └── helpers.ts ├── types/ # TypeScript types │ ├── index.ts │ ├── user.ts │ └── api.ts ├── styles/ # Global styles │ ├── theme.ts # Styled-components theme │ ├── globals.css │ └── variables.css ├── public/ # Static assets │ ├── images/ │ ├── icons/ │ └── fonts/ └── env.example
Explicação das Pastas
app/
CRÍTICAContém toda a estrutura de routing do App Router. Cada pasta = uma rota. Arquivos especiais: layout.tsx, page.tsx, loading.tsx, error.tsx
components/ui
ALTAComponentes reutilizáveis (Button, Card, Modal). Podem ser usados em múltiplas features
components/features
ALTAComponentes específicos de funcionalidades (Auth, Dashboard). Apenas usados em suas features
lib/
ALTAConfigurações e serviços complexos (DB, Auth, API client). Reutilizáveis em toda app
server/
ALTALógica server-side, Server Actions, e serviços backend. Isolados do cliente
hooks/
MÉDIACustom hooks reutilizáveis. Encapsulam lógica de estado e side effects
utils/
MÉDIAFunções puras e utilitários (formatação, validação). Sem dependências externas
types/
MÉDIADefinições TypeScript centralizadas. Interfaces e tipos compartilhados
Boas Práticas Essenciais
Use route groups () para organizar rotas sem afetar URLs
Coloque Server Components por padrão, use "use client" apenas quando necessário
Server Actions para mutações de dados (melhor que API routes)
Mantenha lib/ para configurações e server/ para lógica
Index files (index.ts) para barrel exports e melhor organização
Componentes UI devem ser agnósticos ao contexto da app
TypeScript types centralizados reduzem duplicação
Comparação Rápida
| Feature | Next.js | React |
|---|---|---|
| Roteamento | App Router integrado (file-based) | React Router ou TanStack Router |
| Server/Client | Server Components por padrão | Tudo é Client-side por padrão |
| API | API Routes integradas | Chamadas externas a backend |
| Deploy | Vercel ou qualquer Node host | Qualquer servidor web estático |
| Melhor para | Full-stack apps com backend integrado | SPAs, PWAs, Frontend puro |
💡 Dicas Implementação
Padrão de Import
Use path aliases no tsconfig.json: "@/*", "@/features/*", "@/shared/*"
Index Files
Sempre exporte de index.ts para facilitar imports. Ex: import { Card } from "@/shared/card"
Não Importe Entre Features
Features devem ser independentes. Reutilize via shared/ para UI e utilitários comuns
TypeScript Strict Mode
Ative strict mode no tsconfig.json para máxima type safety
26/11/2025
Boas Práticas de Code Review em React
O que é Code Review?
Code Review é uma prática essencial que envolve a revisão do código por outros desenvolvedores para garantir qualidade, evitar erros e fortalecer a manutenção do projeto.
Checklist para Revisar Código React
- Legibilidade: Código claro, comentado quando necessário e consistente com padrões do time.
- Componentização: Verificar se os componentes são pequenos, reutilizáveis e com responsabilidades claras.
- Estado e Props: Usa props adequadamente, evita estado desnecessário e respeita a imutabilidade.
- Desempenho: Usa técnicas como memoização e evita renderizações desnecessárias.
- Acessibilidade: Confirma uso correto de atributos ARIA, roles e navegação teclado.
- Estilo: Consistência no uso de CSS-in-JS, classes, e aderência ao design system.
- Testes: Cobre os componentes e hooks com testes unitários e de integração adequados.
Dicas para um Code Review Eficiente
- Seja construtivo e focado no código, evite críticas pessoais.
- Priorize entender o contexto do código antes de sugerir mudanças.
- Use ferramentas de revisão integradas para anotação rápida e discussões.
- Garanta que as mudanças não introduzam bugs ou regressões.
- Considere a escalabilidade e manutenibilidade ao sugerir melhorias.
25/11/2025
Design Patterns no React
HOCs (Higher-Order Components)
Higher-Order Components são um padrão avançado que permite envolver um componente para adicionar funcionalidades extras, como layouts, logging ou controle de acesso, sem modificar o componente original. São uma forma poderosa de reutilizar lógica de forma declarativa e manter seus componentes simples.
function withLog<P>(Component: React.ComponentType<P>) {
return (props: P) => {
useEffect(() => console.log(`Componente ${Component.name} montado`), []);
return <Component {...props} />;
};
}Custom Hooks
Hooks personalizados são funções que encapsulam lógica relacionada a estados e efeitos, facilitando o reuso e organização do código. Por exemplo, um hook para buscar dados de uma API gerencia o estado de carregamento, resposta e possíveis erros, deixando o componente que o usa mais limpo e focado na interface.
function useFetchData(url: string) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(res => {
if (!res.ok) throw new Error("Erro na requisição");
return res.json();
})
.then(json => setData(json))
.catch(err => setError(err.message))
.finally(() => setLoading(false))
}, [url]);
return { data, loading, error };
}Compound Components
Compound Components é um padrão para construir componentes compostos e flexíveis que compartilham estado interno, permitindo que seus subcomponentes se comuniquem e ofereçam uma API declarativa e intuitiva para quem utiliza o componente. Um exemplo comum é um dropdown onde o botão controla o menu de opções de forma encapsulada.
function Dropdown({ children }) {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return <div>{children({ isOpen, toggle })}</div>;
}
function DropdownButton({ toggle, label }) {
return <button onClick={toggle}>{label} ▼</button>;
}
function DropdownMenu({ isOpen, children }) {
if (!isOpen) return null;
return <ul>{children}</ul>;
}25/11/2025