Template Projeto NextJs 13 APP diretório.

Sobre • Vitrine Dev • Tecnologias • Instalações • Funcionalidades • Deploy • Autor • Licença

 

💻 Sobre o projeto

🚀 Inicie rapidamente seu projeto com nosso template para NextJs 13. Pré-configurado com NodeJs, TypeScript, JavaScript, React, Tailwind, Dotenv, ZodJs, EsLint e Prettier, este template acelera seu fluxo de trabalho e permite que você se concentre no que realmente importa.

 

 

---

 

📺 Vitrine Dev

🪧 Vitrine.Dev
✨ Nome	Template
🏷️ Tecnologias	NodeJs, TypeScript, JavaScript, Typescript, Nextjs, React, Tailwind, Dotenv, ZodJs, EsLint e prettier.

---

 

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto

 

---

 

⚙️ Instalações

 

Criando projeto NextJs

# Create project nodejs with npm and -y to accept all default options
npx create-next-app@latest

# What is your project named? project-Name
# Would you like to use TypeScript with this project? Yes
# Would you like to use ESLint with this project? Yes
# Would you like to use Tailwind CSS with this project? Yes
# Would you like to use `src/` directory with this project? Yes
# Use App Router (recommended)? Yes
# Would you like to customize the default import alias? No

// Create scripts in package.json
"scripts": {
  "dev": "next dev", // Start development server
  "build": "next build", // Create production build
  "start": "next start", // Start production server
  "lint": "next lint" // Run ESLint
},

Create .nvmrc file with version of NodeJs to use in project  

.env architecture

npm install dotenv # Install dotenv to use environment variables in NodeJs

Create .env file with all environment variables and gitignore this file

Edit .env.example file with all environment variables and not gitignore this file

 

Configurando ESlint and Prettier

npm install -D @rocketseat/eslint-config # Install Rocketseat ESLint config
npm install -D prettier-plugin-tailwindcss # Install prettier plugin to use TailwindCSS

Edit .eslintrc.json file with extends Rocketseat ESLint config

{
  "extends": ["next/core-web-vitals", "@rocketseat/eslint-config/react"]
}

Create .eslintignore file with all ESLint ignore files

Create prettier.config.js file with plugin prettier-plugin-tailwindcss to use Prettier to format classnames of TailwindCSS

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

 

TypeScript architecture

...

 

Others libraries

npm install zod # Install zod to use types in NodeJs and validate data

---

 

⚙️ Funcionalidades

RF - Requisitos Funcionais

• Deve ser possível ...;
• Deve ser possível ...;

RN - Regras de Negócio

• O usuário não pode ...;
• O usuário não pode ...;

RNF - Requisitos Não Funcionais

• Uso de Zod para validação de dados de entrada;
• Uso de Eslint para padronização de código;
• Uso de Prettier para padronização de código;
• Uso de Dotenv para variáveis de ambiente;

 

🧭 Rodando a aplicação (Modo desenvolvimento)

git clone https://github.com/livioalvarenga/Template-Api-Rest-Node-Docker-Prisma.git # Clone este repositório
cd Template-Api-Rest-Node-Docker-Prisma # Acesse a pasta do projeto no seu terminal/cmd
npm install # Instale as dependências
npm run dev # Execute a aplicação em modo de desenvolvimento, a aplicação será aberta na porta:3000 - acesse http://localhost:3000

# Read the observations in home page

Create .npmrc file with save-exact=true to save exact version of dependencies. Create only if you want to save exact version of dependencies and do this after install all dependencies

Open .gitignore and add files folder, because this folder is to put files of project that is not committed in git

🧭 Rodando a aplicação (Modo produção)

npm run build # Compilar o TypeScript em modo de produção
npm run start # Iniciar o servidor em modo de produção

🧭 Testes

...

 

---

 

🚀 Deploy

O deploy foi realizado na plataforma Vercel.com.

As variáveis de ambiente configuradas incluem:

• ...

---

 

🦸 Autor

Olá, eu sou Livio Alvarenga, Engenheiro de Produção | Dev Back-end e Front-end. Sou aficcionado por tecnologia, programação, processos e planejamento. Uni todas essas paixões em uma só profissão. Dúvidas, sugestões e críticas são super bem vindas. Seguem meus contatos.

• www.livioalvarenga.com
• [email protected]

 

---

 

📝 Licença

Este projeto é MIT licensed.

#CompartilheConhecimento