Primeiro, inicie o projeto clonando o repositório:
git clone
Depois, instale as dependências:
npm install
npm run dev
Abra http://localhost:3000 com o seu navegador para ver o resultado.
- Crie uma pasta com o nome do componente dentro de
src/components/_Globais
- Crie um arquivo
index.tsx
e um arquivostyles.module.css
dentro da pasta criada - Importe o arquivo
styles.module.css
no arquivoindex.tsx
- Exporte o componente para ser utilizado em outras partes do projeto
├── App
│ ├── src
│ │ ├── components
│ │ │ ├──_Globais
│ │ │ │ ├──_NovoComponente
│ │ │ │ │ ├──index.tsx
│ │ │ │ │ └──styles.module.css
│ │ │ │ ├──_Footer
│ │ │ │ │ ├──index.tsx
│ │ │ │ │ └──styles.module.css
│ │ │ │ ├──_Header
│ │ │ │ │ ├──index.tsx
│ │ │ │ │ └──styles.module.css
│ │ │ │ ├──
│ │ │ ├──
│ │ ├──
│ ├─
├─
- Crie uma pasta com o nome da página dentro de
src/components
- O nome da pasta deve ser o mesmo nome da página e iniciar com _ (underline), exemplo:
_Home
- Dentro da pasta criada, crie as pastas para cada componente que será utilizado na página e siga o mesmo passo a passo para adicionar um novo componente
├── App
│ ├── src
│ │ ├── components
│ │ │ ├──_Home
│ │ │ │ ├──_Componente1
│ │ │ │ │ ├──index.tsx
│ │ │ │ │ └──styles.module.css
│ │ │ │ ├──_Componente2
│ │ │ │ │ ├──index.tsx
│ │ │ │ │ └──styles.module.css
│ │ │ │ ├──
│ │ │ ├──
│ │ ├──
│ ├─
├─
- Crie uma pasta com o nome da página dentro do diretório
app
- O nome da da pasta será o nome para a rota da página, exemplo:
home
- Dentro da pasta criada, crie um arquivo
page.tsx
- Importe os componentes que serão utilizados no aquivo
page.tsx
e exporte a página
├── App
│ ├──página
│ │ ├──index.tsx
│ ├── sobre
│ │ ├──index.tsx
│ ├── contato
│ │ ├──index.tsx
│ ├─ ...
├─
Para adicionar imagens e arquivos estáticos, acesse a pasta chamada public
na raiz do projeto e adicione os arquivos que deseja utilizar.
Para acessar os arquivos estáticos, utilize a seguinte sintaxe:
<Image src="/nome-do-arquivo.png" alt="Nome do arquivo" />
Lembrete importante: É necessário utilizar o componente Image
do NextJS para utilização de imagens e arquivos estáticos
- Os componentes devem ser criados utilizando a extensão
.tsx
- Os componentes devem ter tipagem utilizando TypeScript
- Os estilos dos componentes devem ser criados utilizando a extensão
.module.css
- Os componentes devem ser criados dentro da pasta
src/components/
- Funções devem ser criadas utilizando camelCase
- Componentes devem ser criados utilizando PascalCase
- Componentes devem ser exportados utilizando a palavra-chave
export default
- A pasta
Helpers
é responsável por armazenar funções e objetos que serão utilizadas em mais de um componente