Avançado FE

Organização de Pastas — Guia Prático

Flat vs nested, colocation, e quando criar abstrações. Exemplos por tamanho de projeto.

Definição

A estrutura de pastas deve refletir como o código muda junto, não o tipo de arquivo. Código que muda junto deve ficar junto (colocation). 3 abordagens: Flat por tipo (simples, não escala). Por feature/módulo (escala bem, recomendada para médio-grande). Híbrida (flat no início, move para feature quando crescer).

Problema → Solução

Problema

Componentes, hooks e testes espalhados em pastas separadas obrigam navegação entre arquivos distantes. components/Button.tsx, hooks/useButton.ts, tests/Button.test.tsx — todos deveriam ficar juntos.

Solução

Colocation: coloque o arquivo perto de onde é usado. Se é usado em um só lugar, coloque junto ao consumidor. Se é usado em 2+ lugares não relacionados, mova para shared/. Para apps médio-grandes: estrutura por feature.

Dica de entrevista

Tip

Não crie abstrações de organização antes de precisar. Comece flat. Quando uma pasta tiver 10+ arquivos, divida por feature. Imports devem apontar para baixo na hierarquia, nunca para cima ou para irmãos de outro domínio.

Código

// Projeto pequeno (flat)
src/
├── components/  ├── hooks/  ├── pages/  └── utils/

// Projeto médio (por feature)
src/
├── app/                     # rotas Next.js
├── components/              # UI global (Button, Input, Modal)
├── features/
│   ├── auth/
│   │   ├── LoginForm.tsx
│   │   ├── LoginForm.test.tsx  # junto com o componente!
│   │   ├── useLoginForm.ts     # junto!
│   │   └── loginApi.ts
│   ├── products/
│   └── checkout/
├── hooks/                   # hooks globais
├── lib/                     # utils globais
└── types/                   # tipos globais

// Colocation: test e hook junto do componente
features/auth/
├── LoginForm.tsx
├── LoginForm.test.tsx
└── useLoginForm.ts

Perguntas de entrevista

Q.Onde colocar componentes usados em um só lugar?▾

A.Junto ao componente que os usa. Se PageDashboard.tsx usa DashboardChart.tsx, coloque em pages/dashboard/DashboardChart.tsx. Só mova para shared/components/ quando for usado em 2+ lugares não relacionados.

Q.Como organizar um projeto Next.js App Router?▾

A.app/ para rotas. src/components/ para UI reutilizável. src/features/ para lógica de domínio. src/lib/ para utils. src/hooks/ para hooks reutilizáveis. Evitar barrel exports (index.ts que re-exporta tudo) — causam tree-shaking e imports circulares.

Q.Barrel exports (index.ts) valem a pena?▾

A.Para bibliotecas e design systems, sim (public API clara). Para app code, pode gerar imports circulares e prejuízo ao tree-shaking. Evitar re-exports de tudo. Preferir imports diretos no código de aplicação.

57/122← →