Template Website

📂 Estrutura do Projeto

📦 my-nextjs-app
├── 📂 public
│   └── (Arquivos estáticos acessíveis publicamente, como imagens e ícones)
├── 📂 src
│   ├── 📂 app
│   │   ├── 📂 [lang] (Internacionalização - tudo dentro será traduzido)
│   │   │   ├── 📂 about (Página sobre, acessível como /pt/about ou /en/about)
│   │   │   ├── layout.tsx (Layout global, aplicável a todas as páginas traduzidas)
│   │   │   ├── page.tsx (Página inicial internacionalizada, ex: /pt ou /en)
│   │   ├── 📂 dashboard
│   │   │   ├── page.tsx (Página do dashboard)
│   │   └── 📂 (outras rotas...)
│   ├── 📂 components
│   │   ├── 📂 common
│   │   │   └── (Componentes globais e reutilizáveis, como Button, Modal, Input)
│   │   ├── 📂 layout
│   │   │   └── (Componentes de layout, como Navbar, Footer, Sidebar)
│   ├── 📂 hooks
│   │   └── (Custom hooks criados para facilitar a lógica e reutilização de código)
│   ├── 📂 i18n
│   │   ├── i18n.config.ts (Configuração de internacionalização)
│   │   ├── dictionaries/ (Dicionários de idiomas)
│   ├── 📂 styles
│   │   └── (Arquivos de estilização global, como `global.css`)
│   ├── 📂 types
│   │   └── (Definições de tipos TypeScript)
│   ├── 📂 lib
│   │   └── (Bibliotecas customizadas específicas da aplicação)
│   └── 📂 middleware.ts (Middleware para internacionalização)
└── next.config.js (Configuração do Next.js)
└── package.json (Dependências e scripts do projeto)
└── tsconfig.json (Configuração do TypeScript)
└── .env (Variáveis de ambiente)

📜 Internacionalização ([lang])

A pasta [lang] é responsável pela internacionalização do site. Todas as páginas dentro dessa pasta serão acessíveis com um prefixo de idioma, como /pt ou /en. Por exemplo:

/ ➝ Redireciona para o idioma padrão (ex: /pt).
/en ➝ Versão em inglês do site.
/pt ➝ Versão em português do site.
/en/about ➝ Página "Sobre" em inglês.
/pt/about ➝ Página "Sobre" em português.

📂 Detalhes das Pastas

/public

Armazena arquivos estáticos acessíveis publicamente, como imagens, vídeos e favicons. Essa pasta é usada para qualquer recurso que precise ser acessível diretamente no navegador. Escolha: Colocar todos os arquivos estáticos aqui facilita o acesso e permite uma gestão clara dos recursos públicos da aplicação.

/src/app

A pasta principal para as rotas e páginas da aplicação. No Next.js 13, esta pasta introduz uma maneira mais moderna e eficiente de organizar as rotas, utilizando layouts aninhados e segmentação de rotas.

layout.tsx: Define o layout global da aplicação, aplicável a todas as rotas. Este arquivo é uma excelente maneira de garantir consistência na UI.
page.tsx: Página inicial da aplicação. Cada subpasta dentro de app representa uma rota, e o arquivo page.tsx define a entrada da rota.
[lang]/: Diretório de internacionalização, onde cada rota será traduzida.

/src/components

Organiza componentes reutilizáveis e modulares.

common/: Componentes globais e reutilizáveis, como botões e modais.
layout/: Componentes de layout, como cabeçalho e rodapé.

✅ Benefícios Desta Estrutura

Escalabilidade: Modulariza a aplicação, facilitando a adição de novas funcionalidades.
Organização: Segrega diferentes tipos de arquivos e lógicas, tornando a aplicação mais fácil de manter.
Reutilização: Centraliza componentes, hooks e serviços, promovendo a reutilização e evitando duplicação.
Testabilidade: Estrutura clara para testes, promovendo uma cobertura abrangente da aplicação.