Next.js

Template Next.js
_{Criação de pastas base que normalmente uso em todos os projetos em Next.js}

🧩 Introdução    |    🚀 Resultados   |    🧪 Dependências   |    💡 Possíveis Melhorias    |    🏆 Créditos       

🧩 Introdução

⠀⠀⠀⠀O template que uso para iniciar todos os projetos em Next.js é baseado em JavaScript e vem com algumas configurações pré-definidas para facilitar o desenvolvimento, como suporte para CSS modules, pré-processadores de CSS, ESLint e Prettier. Além disso, inclui uma estrutura básica de pastas e arquivos que me ajuda a organizar o código e torná-lo mais escalável. Com esse template, consigo começar novos projetos rapidamente e com a confiança de que estou seguindo as melhores práticas de desenvolvimento em Next.js.

📖 Volta ao Sumário

🚀 Resultados

Todos os resultados foram alcançados com sucesso. De modo geral são esses os resultados.

Welcome

vscode

⚙ Estrura de Projeto

• - src : Pasta principal onde fica toda esturutura
• - components: Reutilizáveis
• - constants: URLs, cores
• - global : Utilizado em toda parte do projeto
• - hooks : Recursos de state e ciclo de vida
• - pages: Telas do seu app
• - scss : Estilização em sass
• - services: Integrações
• - styles: Estilização em css

📂 Oque tem dentro das pastas

• - BASE_URL.JS : url principal para usar com axios
• - useContext.js : state global para ser usado em toda aplicação
• - useForm.js : useform pronto para ser usado em qualquer projeto
• - _app.js : tem que ter para a aplicação em Nest.js funcionar
• - index.js : Rota Home do projeto
• - Home.module.scss : Estilização em sass
• - /services index.js : requisições feita por axios
• - /styles globals.css Estilização em css

📖 Volta ao Sumário

🧪 Dependências

Requisitos para rotar o codigo...

📖 Instalação

Caso tenha Git basta da git clone, caso não tenha baixe o projeto completo em dowlon

git clone https://github.com/MayconCoutinho/Next.js-Template

Caso já tenha o Node em sua maquina basta instalar o projeto com npm i

npm i 

📖 Scripts

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  }

📖 Dependencies

  "dependencies": {
    "axios": "^0.27.2",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.54.8"
  }

📖 devDependencies

  "devDependencies": {
    "@commitlint/cli": "^17.6.1",
    "@commitlint/config-conventional": "^17.6.1",
    "eslint": "^8.38.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-google": "^0.14.0",
    "eslint-config-next": "12.2.5",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "prettier": "^2.8.7"
  }

📖 Volta ao Sumário

💡 Possíveis Melhoras

Possíveis melhorias no código e no projeto, caso queira voltar e melhorá lo.

• - .editorconfig
• - eslintrc
• - prettierrc
• ***- ***
• ***- ***

📖 Volta ao Sumário

🏆 Créditos

Maycon Coutinho	Hello 😃 Se você chegou até aqui, acredito que gostou do meu projeto, nesse caso temos algo em comum, sendo assim que tal conversamos um pouco? Meu chama no linkedin 😁

⠀⠀⠀⠀⭐ Linkedin⠀⠀⠀⠀🧙 GitHub