Configuração inicial - orivaldosantana/mvp_banco_talentos GitHub Wiki

Criando o projeto

Instalação

Versões

  • Next.js 14.2.3
  • Node 18.19.0
  • Npm 10.2.4

Criado os arquivos básicos para a aplicação:

npx create-next-app@latest .

Instalação de pacotes

Material UI:

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

Para instalar o Prisma como uma dependência de desenvolvimento:

npm install --save-dev prisma

A dependência de desenvolvimento não é instalada quando o projeto for implantado em um ambiente de produção.

Para instalar o Prisma Client como uma dependência de produção:

npm install @prisma/client

Esse comando instala o Prisma Client como uma dependência de produção, o que significa que ele será instalado quando o projeto for implantado em um ambiente de produção.

A biblioteca bcryptjs é usada para criptografar a senha do usuário, antes de cadastrar no banco de dados:

npm i bcryptjs

Biblioteca para autenticação:

npm i [email protected]

CSS

Usando o css

import styles from './page.module.css'
<div className={styles.description}>Estilizado</div>

Uso de ícones do Material UI:

import { Dashboard } from '@mui/icons-material'

<Dashboard />

Para mais informações visite:

Configuração do ambiente

Variáveis de ambiente

Arquivo .local.env e conexão com o banco de dados neon.tech:

DATABASE_URL=postgresql://user:[email protected]
SHADOW_DATABASE_URL=postgresql://user:[email protected]

Instalação de plugins

Na área de "Extensões" do visual studio code instale os seguintes plugins:

  • Prettier - Code formatter
  • ESLint

Instalação de pacotes

Comando para instalar prettier e eslint-config-prettier como dependências de desenvolvimento:

npm install prettier eslint-config-prettier -D

prettier é uma ferramenta de formatação de código que suporta várias linguagens e integra-se com a maioria dos editores de texto. O Prettier ajuda a manter seu código consistente em termos de estilo.

eslint-config-prettier é uma configuração do ESLint que desativa todas as regras que são desnecessárias ou podem entrar em conflito com o Prettier. O ESLint é uma ferramenta de linting que ajuda a encontrar e corrigir problemas no seu código JavaScript.

Instala o pacote eslint-plugin-react-hooks como uma dependência de desenvolvimento:

npm install eslint-plugin-react-hooks --save-dev

eslint-plugin-react-hooks é um plugin para o ESLint que impõe as regras dos Hooks do React. Hooks são uma funcionalidade do React que permite que você use o estado e outros recursos do React sem escrever uma classe.

Configuração

Comando para configurar o ESLint:

npx eslint --init

No arquivo de configuração do Prettier (.prettierrc):

{
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true
}

A configuração acima especifica que não deve haver vírgulas finais ("trailingComma": "none"), não deve haver ponto e vírgula no final das instruções ("semi": false) e as aspas simples devem ser usadas em vez de aspas duplas ("singleQuote": true).

Referências

⚠️ **GitHub.com Fallback** ⚠️