Padrão de design de software para aplicações front-end. Esse documento visa disseminar o uso de uma padrão de design para projetos feitos principalmente com o framework Next.JS e TypeScript .

<aside> 👌 Esse padrão se torna ainda mais vantajoso quando utilizado com path alias.

</aside>

<aside> ⭐ Sugiro esse boilerplate como base para seguir esse design: [<https://github.com/danicunhac/next-boilerplate>](<https://github.com/danicunhac/next-boilerplate>)

</aside>

Exemplo ilustrativo de como fica a estrutura do diretório src seguindo o padrão Common Layout

Common

Muito similar ao famoso 'components', é onde todos os componentes em comum de toda aplicação devem estar alocados, como Wrappers, Loaders, Cards, etc.

Exemplo de como estruturar o diretório common

<aside> 💡 É indicado o uso de um arquivo index.ts para exportar os componentes presentes nessa pasta, centralizando a importação.

</aside>

<aside> 💡 It's indicated the use of an index file to export the components in this directory, centralizing the import.

</aside>

Exemplo de importação e exportação dos componentes no arquivo common/index.ts

Layout

Uma das maiores vantages desse modelo de design é ter esse diretório para alocar os arquivos usados nas páginas. Deve conter todo o código de uma página completa, possuindo importação de componentes, estilos e tipos.

Exemplo de como estruturar o diretório layout

<aside> ⭐ No exemplo acima foram utilizadas sub-pastas para alocar os arquivos de diferentes páginas, assim como os componentes específicos de cada uma, o arquivo index e caso necessário, os estilos da página.

</aside>

Pages

O diretório pages é definido por padrão no Next.js e não deve ser alterado, o intuito dele nesse modelo de design, além de alocar os arquivos _app.tsx, _document.tsx e index.tsx, é de roteamento e importação dos layouts.

Exemplo de como estruturar o diretório pages .

Exemplo de estrutura do arquivo index.tsx do diretório pages .