Avançado FE

Arquitetura Feature-Sliced

Organizar por features (vertical slices) em vez de tipo de arquivo. Escalável para times grandes.

Definição

Feature-Sliced Design (FSD) organiza código em camadas: app/ (setup global), pages/ (rotas), widgets/ (blocos de UI compostos), features/ (casos de uso do usuário), entities/ (modelos de negócio), shared/ (utils, UI base). Cada feature é auto-contida: seu próprio store, hooks, componentes e testes. Elimina o problema de pastas gigantes de components/ e utils/ sem critério.

Problema → Solução

Problema

Projeto com components/, hooks/, utils/ planas que crescem sem critério. Difícil saber qual componente pertence a qual feature. Mudança em uma feature quebra outra por acoplamento acidental.

Solução

Organizar por domínio: src/features/auth/, src/features/cart/. Cada feature tem components, hooks, api e store próprios. Shared/ só para genuinamente reutilizável. Regra de ouro: features não importam de features.

Dica de entrevista

Tip

Não precisa implementar FSD completo desde o início. O passo 1: parar de colocar tudo em components/ e criar pastas por feature. Comece com src/features/[nome]/{components,hooks,api,store}.

Código

src/
├── app/               # Setup: providers, globals
├── pages/ (ou app/)   # Rotas Next.js
├── widgets/           # Blocos compostos de UI
│   └── Navbar/
├── features/          # Casos de uso
│   ├── auth/
│   │   ├── ui/LoginForm.tsx
│   │   ├── api/login.ts
│   │   ├── model/useAuth.ts
│   │   └── index.ts   # public API da feature
│   └── cart/
├── entities/          # Modelos de negócio
│   ├── user/
│   └── product/
└── shared/            # Genuinamente reutilizável
    ├── ui/Button.tsx
    └── lib/formatDate.ts

// Regra: imports só descem na hierarquia
// ✅ features/auth importa de entities/user
// ❌ features/auth importa de features/cart

Perguntas de entrevista

Q.Qual a diferença entre features/ e entities/?▾

A.entities/ contém modelos de negócio puros (User, Product) sem lógica de UI — só tipos, schemas, funções puras. features/ contém casos de uso específicos (auth/login, cart/addItem) com UI e lógica de interação.

Q.Como lidar com estado compartilhado entre features?▾

A.Elevar para o nível acima (app/ ou uma entity compartilhada). Se User é usado por auth e profile, o store de User fica em entities/user. Features importam de entities, não umas das outras.

Q.FSD funciona com Next.js App Router?▾

A.Sim. O app/ do Next.js fica como esperado. O resto segue FSD em src/. As rotas importam de features/, que importam de entities/, que importam de shared/. A hierarquia de imports é unidirecional.

56/122← →