Arquitetura para aplicações Next.js
Recentemente fiz um post mostrando como monto a arquitetura das minhas aplicações utilizando React, se você não viu da uma olhada aqui, vai curtir bastante!
E algumas pessoas me perguntaram como eu fazia com o Next.js, então escrevi esse post para mostrar como eu adapto aquela arquitetura para as minhas aplicações utilizando o tão amado Next.js.
Mas antes…
Se você não sabe o que é o Next.js, deixa eu te explicar rapidinho!
Next.js é um framework React com foco em produção e eficiência criado e mantido pelos engenheiros da Vercel, o Next.js busca reunir diversas funcionalidades como renderização hibrida e estática de conteúdo, suporte a TypeScript, pre-fetching, sistema de rotas, pacotes de funcionalidades e diversos plugins e exemplos para acelerar seu desenvolvimento fornecendo uma estrutura completa para você iniciar seu projeto.
Next.js é um framework de código aberto hospedado no github sob a licença MIT. Veja algumas empresas que utilizam o Next.js em suas aplicações clicando aqui.
Pronto, agora que você já sabe o que é Next.js podemos continuar!
⚠️ Uma informação importante:
O projeto de exemplo foi iniciado utilizando o create-next-app que gera para nós um boilerplate básico. Então caso você tenha alguma dúvida, recomendo dar uma lida na documentação acessando aqui.
Como eu disse lá no outro post, o meu principal objetivo quando começo uma nova aplicação para um cliente, é de como eu vou deixar isso simples e fácil para os outros desenvolvedores do time.
E na minha opinião o melhor caminho para atingir esse objetivo é deixar tudo o mais simples e claro possível, o por onde começamos isso?! Pela organização e nomenclatura das pastas e arquivos.
Já tive a oportunidade de desenvolver projetos para muitas empresas de grande porte ao redor do mundo, e o que eu mais via nessas aplicações era um File System desorganizado dando voltas e voltas que deixava tudo bem confuso. E quando eu tinha que resolver algum problema eu perdia mais tempo tentando achar onde estava o arquivo do que corrigindo o bug em si.
Então eu começo pensando em como vou organizar meu File System, e o jeito que eu mais gosto de fazer é dessa forma:
Deixa eu te explicar o que é cada pasta:
- Common
Aqui estão todos os asstes do projeto que serão usados pelo aplicativo, como estilos globais, imagens, fontes, mocks, funções reutilizáveis como máscaras, entre outros. - Components
Aqui vai ficar todos os componentes que são utilizados pela aplicação. No post de React eu crio uma pasta de components dentro da pasta Pages para os componentes exclusivos das páginas, mas como o Next.js usa um sistema de rotas diferente, não é possível criar uma pasta components dentro da pages, então todos os componentes ficarão aqui. - Configs
Aqui vai ficar todos os arquivos de configuração, que são utilizados de uma forma global pela aplicação. - Containers
Aqui vai ficar todos os nossos containers responsáveis por fazer um Dependency Injection na nossa aplicação, tirando a dependencia da nossa aplicação de funcionar com alguma biblioteca. - Hooks
Aqui eu gosto de deixar todos os hooks customizáveis da aplicação, por exemplo, um hook que cuida da sessão do usuário. - Pages
Como o próprio nome já diz, aqui vai ficar todas as páginas da nossa aplicação, e também todas as rotas da nossa API criada com o API routes do Next.js, e também por conta das rotas do Next.js os Styles dessa página fica dentro de common/styles/pages/YourPage.ts. - Services
Nessa pasta fica todos os arquivos responsáveis por consumir serviços externos, como por exemplo o arquivo de configuração do axios para consumir APIs RestFul.
Agora vou te dar um exemplo de como fica a estrutura de uma pasta de componente:
components
|-- YourComponent
|-- YourComponent.tsx
|-- YourComponent.spec.tsx
|-- interfaces.ts
|-- styles.ts
|-- index.ts
...Dentro de cada pasta de componente eu gosto de criar os seguintes arquivos:
- Um arquivo responsável pelo componente:
YourComponent.tsx - Um arquivo para testes (Quando tem Testes):
YourComponent.spec.tsx - Um arquivo para as interfaces (Quando uso TypeScript):
interfaces.ts - Um arquivo para o styled-components:
styles.ts - E um arquivo responsável por exportar o componente:
index.ts
E por último, como fica a pasta de uma página:
pages
|-- api
|-- YourApiRouteName.ts
|-- YourPage
|-- index.ts
...Dentro de cada pasta de página eu gosto de criar os seguintes arquivos:
- Uma pasta responsável pelas rotas (se tiver) da sua API criada com o API Route do Next.js
- Um arquivo ou pasta responsável pela página:
YourPage.tsx
E é dessa forma que eu organizo minhas aplicações React 🤩
Eu criei um repositório no GitHub com a estrutura completa, se você quiser dar uma olhada mais a fundo na estrutura é só clicar nesse link.
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe ai nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por ai! 😜
- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
