Arquitetura de pastas e arquivos - ipecode-br/abnmo-frontend GitHub Wiki

Este documento descreve a organização de pastas e arquivos do projeto, seguindo as convenções do Next.js com algumas adaptações para melhor manutenibilidade.

📂 Estrutura de pastas e arquivos

├── public/
    └── folder/
        └── file-name.svg
├── src/
    ├── actions/
    │   ├── folder/
    │   │   └── action-name.ts
    │   └── action-name.ts
    ├── app/
    │   ├── wrapper/
    │   │   ├── layout.tsx
    │   │   └── page/
    │   │       ├── _component/
    │   │       │   └── component-name.tsx
    │   │       ├── hooks/
    │   │       │   └── hook-name.tsx
    │   │       ├── helpers/
    │   │       │   └── helper-name.tsx
    │   │       └── page.tsx
    │   ├── route-name/
    │   │   └── page.tsx
    │   ├── icon.png
    │   ├── layout.tsx
    │   ├── not-found.tsx
    │   └── opengraph-image.jpg
    ├── components/
    │   ├── ui/
    │   │   └── component-name.tsx
    │   ├── global/
    │   │   ├── folder/
    │   │   │   └── component-name.tsx
    │   │   └── component-name.tsx
    │   └── utility/
    │       └── component-name.tsx
    ├── config/
    │   └── config-file.ts
    ├── constants/
    │   └── constant-file.ts
    ├── helpers/
    │   └── helper-function.ts
    ├── http/
    │   ├── folder/
    │   │   └── http-function.ts
    │   └── http-function.ts
    ├── lib/
    │   ├── api.ts
    │   └── fonts.ts
    ├── styles/
    │   └── globals.css
    ├── types/
    │   └── type.d.ts
    └── middleware.ts

📂 Detalhamento das pastas e arquivos

• public/:

  • Contém arquivos estáticos acessíveis diretamente pela URL. Útil para imagens, ícones, fontes e outros ativos públicos.

• src/:

  • Diretório principal do código-fonte da aplicação.

• src/actions/

  • Contém funções assíncronas responsáveis por lidar com ações do lado do servidor, como formulários ou operações específicas.
  • action-name.ts: Ações isoladas.
  • folder/action-name.ts: Ações organizadas em subpastas por domínio/contexto.

• src/app/

  • Pasta principal de rotas da aplicação, conforme o modelo de App Router do Next.js.
  • wrapper/: Layouts e páginas genéricas reutilizáveis.
    • layout.tsx: Define a estrutura visual compartilhada (wrapper).
    • route-name/page.tsx: Página associada a esse layout.
  • route-name/page.tsx: Define a rota específica da aplicação.
  • icon.png: Ícone padrão da aplicação (favicon).
  • layout.tsx: Layout raiz da aplicação.
  • not-found.tsx: Página personalizada de "404 - Not Found".
  • opengraph-image.jpg: Imagem utilizada para compartilhamento em redes sociais (Open Graph).

• src/components/

  • Componentes reutilizáveis organizados por tipo ou escopo.
  • ui/: Componentes básicos e reutilizáveis de interface (botões, inputs, etc.).
  • global/: Componentes que aparecem em diversas partes da aplicação (ex: cabeçalhos, rodapés).
  • folder/: Subgrupos de componentes globais.

• src/config/

  • Arquivos de configuração da aplicação (ex: integrações, variáveis de ambiente, etc.).

• src/constants/

  • Contém constantes utilizadas em múltiplas partes da aplicação, como chaves, nomes de rotas, etc.

• src/helpers/

  • Funções utilitárias que auxiliam no processamento de dados e lógica de negócio.

• src/http/

  • Funções e abstrações para chamadas HTTP, como requisições para APIs externas.
    • http-function.ts: Funções de fetch ou integração com serviços externos.
    • folder/http-function.ts: Organização por domínio de negócio.

• src/lib/

  • Bibliotecas e arquivos de utilidade geral.
    • api.ts: Configurações ou instâncias para requisições a APIs.
    • fonts.ts: Configuração de fontes utilizadas na aplicação.

• src/types/

  • Definições de tipos e interfaces TypeScript globais utilizados em todo o projeto.

• middleware.ts

  • Middleware da aplicação, utilizado para redirecionamentos ou manipulação de requisições/respostas no servidor.

🏷 Convenções Importantes

1. Nomes de de pastas e arquivos em kebab-case;
2. Pastas de rotas em português;
3. Nome dos componentes em PascalCase;
4. Tipos compartilhados sempre em src/types/.