por @Samuel Cabral

Introdução

A arquitetura de pastas baseada em features para projetos Next.js organiza os arquivos do projeto em torno das funcionalidades do aplicativo, em vez de agrupá-los por tipo de arquivo.

Este documento detalha a estrutura de pastas proposta, seus benefícios e um exemplo prático de aplicação.

Nosso objetivo é melhorar a organização do código, facilitar a manutenção e tornar o processo de desenvolvimento mais eficiente.

Benefícios da Arquitetura Baseada em Features

1. Facilidade de Navegação: Com todos os arquivos relacionados a uma funcionalidade específica agrupados, os desenvolvedores podem encontrar rapidamente o que precisam.
2. Manutenção Simplificada: Alterações em uma funcionalidade específica são localizadas em um único lugar, reduzindo a possibilidade de impactos indesejados em outras partes do código.
3. Escalabilidade: Adicionar novas funcionalidades se torna mais direto, com cada nova feature recebendo seu próprio conjunto de pastas e arquivos.
4. Colaboração Aprimorada: Com uma estrutura organizada, novos desenvolvedores podem se familiarizar mais rapidamente com o projeto.

Estrutura de Pastas do Projeto

📂 src

A pasta src é a raiz do projeto, onde todos os códigos fonte e arquivos relacionados ao código são armazenados. Ela contém várias subpastas, cada uma com um objetivo específico. Isso inclui pastas para componentes, contextos, features, hooks, páginas, serviços, estilos e utilitários. Em projetos Next.js, a organização desta pasta é chave para a manutenção e escalabilidade do código.

📁 components

Esta pasta contém componentes globais, organizados da seguinte maneira:

• my-component.tsx: arquivo que contém o código do componente.

  • Se o componente for muito longo, necessitará de sub-componentes. Se tivermos um header global e este necessitar de sub-coponentes, teremos uma estrutura como no modelo abaixo:

    📂 header/

    ⚛️ logo.tsx

    ⚛️ search-box.tsx

    ⚛️ profile-info.tsx

    ⚛️ index.tsx

    Onde o index.tsx seria header.tsx caso não houvesse sub-componentes.

• types.ts: Este é o arquivo que contém as tipagens usadas pelo componente. Apenas tipagens auxiliares. A tipagem das props não necessita estar aqui.

• my-component.spec.tsx: arquivo que contém os testes unitários do componente.

<aside> ⚠️ Para seguir o padrão de nomeação de arquivos adotado pelo Next.js, fazemos uso do kebab-case e não do PascalCase.

</aside>