Executando verificação de segurança...
1
m4c1el
2 min de leitura ·

📁 A MELHOR ESTRUTURA DE PASTAS PRO SEU PROJETO NEXT.JS (feature-based folder structure)

Em resumo: Separe seus arquivos com base em funcionalidades. Essa é a famosa estrutura de pastas "feature-based". Você cria uma pasta "features", e suponhamos que você tem auth na aplicação. Nela, ficariam todos os componentes, server actions, schemas pra validação de dados, tipagens, e outros. É como se você tivesse replicando a estrutura básica da pasta root só que destinado só pra aquela funcionalidade.

Veja um exemplo:

.
├── src/
│   ├── app
│   ├── components
│   ├── lib
│   ├── features/
│   │   ├── auth/
│   │   │   ├── actions/
│   │   │   ├── components/
│   │   │   └── services/
│   │   ├── users/
│   │   │   ├── actions/
│   │   │   ├── components/
│   │   │   └── services/
│   │   └── posts/
│   │       ├── actions
│   │       ├── components
│   │       └── services
│   ├── hooks
│   └── db
├── next.config.ts
├── package.json
├── tsconfig.json
└── README.md

Quer um exemplo prático? Eu fiz uma mini-rede social que tá no ar, e que inclusive vou deixar o GitHub aqui, e quero falar da minha experiência refatorando o projeto pra utilizar essa estrutura de pastas. Aqui as vantagens absurdas que eu consegui separando meus arquivos desse modo:

  1. O projeto já fica absurdamente mais limpo, tanto em termos de código quanto em termos de pastas.
  2. O projeto fica modular. Se eu quero algo relacionado ás notificações do usuário, eu sei que está em /features/notifications, INDEPENDENTE do que seja.
  3. O app router fica destinado APENAS para rotas. Nada de criar pasta com underline pra um componente que é usado em uma página em específico.
  4. As pastas do primeiro nível do /src ficam reservadas APENAS para coisas que são utilizadas pelo projeto inteiro: componentes globais, instâncias pré-configuradas de bibliotecas, assets...
  5. É absurdamente escalável. Quer adicionar uma feature nova pra algum escopo da aplicação? Pega uma pasta da /features e começa a trabalhar por lá, ou crie outra pasta!

Eu recomendo isso pra TODO MUNDO que já tá um pouco mais avançado no Next.js e tá perdido em organização de pastas. Essa é a melhor organização de projeto que eu faço em 3 anos estudando programação.

Repositório do projeto: https://github.com/m4c1elz/mpost/tree/dev
(branch de dev, porque ainda não botei as mudanças pro site que tá pro master)

Carregando publicação patrocinada...