Introdução

É importante o entendimento dos diretórios do projeto, para que seja possivel a manutenção e se manter os padrões de projeto. Você também pode configurar o seu projeto de acordo com suas preferências, como alterar a versão, nome, metadados, etc.

Alguns arquivos de configuração serão abordados mais adiante, em outras seções.

Diretórios

Os diretórios do projeto são organizados de forma a manter a padronização e facilitar a manutenção, abaixo estão os diretórios e arquivos do projeto:

• public: Pasta com arquivos estáticos que serão servidos pelo servidor. Principalmente imagens
• src: Diretório contendo o código fonte do projeto.
• .husky: Diretório contendo os scripts que serão utilizados na checagem de commits.
• .next: Diretório gerado pelo Next durante a execução do projeto, tem configurações, cache, etc.
• node_modules: Diretório em que seram armazenadas as dependências do projeto geradas pelo package.json.
• .gitignore: Arquivo onde ficam os diretórios e arquivos a serem ignorados pelo git.
• components.json: Arquivo JSON utilizado pelo shadcn para a adição de novos componentes por meio de sua CLI (Command Line Interface).
• eslint.config.mjs: Onde ficam os arquivos de configuração do ESLint.
• LICENSE: Licensa da codebase.
• next.config.ts: Arquivo de configurações do Next.
• package.json: Arquivo de dependências do seu projeto, além de versão atual e nome.
• package-lock.json: Arquivo de dependências do seu projeto, gerado pelo package.json.
• postcss.config.mjs: Arquivo de configurações do PostCSS.
• README.md: Arquivo readme do projeto que será utilizado pelo Github.
• tailwind.config.ts: Arquivo de configurações do TailwindCSS.
• tsconfig.json: Arquivo JSON de configuração do Typescript em relação ao React e Next.
• next-env.d.ts: Arquivo gerado pelo Next durante a sua execução, assim como o diretório .next.

A maioria dos diretórios e arquivos acima serão explorados em suas respectivas seções, mas abaixo abordaremos alguns deles.

Diretório public

Onde ficam os arquivos estáticos do projeto, como imagens, arquivos pdf para download, svgs, etc. É composto por 3 principais subdiretórios:

• files: Armazenamento para arquivos de texto e que não sejam imagens de forma geral.
• icons: Onde ficarão os icones da aplicação e icones de uso geral (formato svg).
• images: Onde ficarão imagens png, jpg ou jpeg da aplicação, imagens mais pesadas.

Diretório src

É o principal diretório do projeto, contém todo código fonte que gerará a aplicação e é composto pelos seguintes subdiretórios:

• app: Onde ficam os arquivos de fonte que o Next chamará, além de um arquivo de css global e sistema de roteamento em seus subdiretórios.
• components: Onde ficará os seus componentes, sendo ui para componentes comuns de UI e core para componentes CORE da sua aplicação, menos generalizados.
• data: Usado para arquivos contendo dados estáticos da sua aplicação.
• hooks: Onde se armazenará os hooks da sua aplicação.
• services: Armazenamento de arquivos de servico da aplicação. Ex. chamada de API's externas ou internas, conexão com banco de dados, etc.
• tests: Onde ficarão os arquivos de testes para a aplicação, caso haja.
• types: Arquivos ts ou tsx que descrevem os tipos para os dados.
• utils: Onde ficam as funções de utilidade interna comuns da aplicação, caso haja a interação com bibliotecas, se pode utilizar o subdiretório lib.

Versões antigas do Next utilizavam outra organização de diretórios na pasta app, pages era um diretório comum em que seriam organizadas as suas páginas para roteamento.

Configurações

Por enquanto, ainda não mexeremos com arquivos de configuração a fundo, as configurações serão melhor abordadas em suas respectivas seções.

De começo, podemos definir um nome para nosso projeto no arquivo package.json, além de definir uma versão inicial para a aplicação.

A versão inicial é importante para que possamos controlar as versões da aplicação, além de ser um padrão de mercado. Recomendamos a utilização de 1.0.0-SNAPSHOT para a primeira versão.

1

Mais detalhes desse arquivo poderão ser encontradas em Node e em outras páginas deste guia.