Boilerplate NextJs configurado pronto para uso...

Configurado com: NextJS | Material-UI | Typescript | Husky | ContextApi | Cypress | Jest | Casl | etc...

Frameworks/Bibliotecas utilizadas

NextJs
O Next.js é um framework de código aberto, criado com React e permite o desenvolvimento de aplicações tanto front-end quanto back-end. O React é uma biblioteca Javascript para construção de interfaces e o Next é considerado um framework pois adiciona várias funcionalidades em cima do React. O Next.js por sua vez, busca reunir diversas funcionalidades a fim de manter o foco total em sua produtividade e eficiência. Totalmente pré-configurado, fornece toda estrutura para a criação de projetos com maior facilidade, trazendo para o desenvolvedor maior agilidade na criação de suas aplicações. Além disso, o Next.js permite que suas aplicações sejam renderizadas no lado do servidor (SSR), diminuindo o tempo de carregamento da aplicação, já que o esforço fica por conta do servidor, não do dispositivo do cliente, além de consumir menos recursos, veja mais na documentação.

Material-UI
Material Design é um sistema de design apoiado em código-fonte aberto que auxilia as equipes a criarem experiências digitais de alta qualidade padronizando todas as suas interfaces gráficas. o Material Design tem o princípio de ser simples, direto, chamativo, amigável e intuitivo, então cada elemento da interface deve se encaixar nessas características, além de ser muito bem documentada, ativamente mantida, com vários cases de sucesso, muito customizável, facilitando a criação de componentes com comportamentos padrões, como modals, formulários, além disso existe a possibilidade de customizar com CSS utilizando o padrão recomendado pela própria biblioteca, veja mais na documentação.

Axios
Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quando no Node.js. Um dos grandes pontos de aderência ao Axios é seu suporte aos navegadores, mesmo os antigos como Internet Explorer 11 que pode rodá-lo sem problemas além de ser um projeto open source, que está disponível no Github, tem 77 mil stars e 7 mil forks e está sendo bem mantido pela comunidade, veja mais na documentação.

Yup
Yup é um validador de dados atuando de uma maneira abstrata que não interfere com o restante da lógica de negócios. Com o Yup, criamos um objeto formatado que se parece com o esquema pretendido, em seguida, usamos as funções do utilitário Yup para verificar se o objeto de dados corresponde a esse esquema e assim, validando-os, podendo inclusive ser utilizado em forms, veja mais na documentação.

Formik
Formik é uma biblioteca que facilita o manuseio de formulários tornando todo o processo de criação simples e organizado. Com essa biblioteca bastam poucas linhas de código para se ter um formulário reutilizável, para isso os dados são encapsulados oferecendo maneiras mais simples de tratamento das validações, submits, valores padrões, erros, etc, veja mais na documentação.

Jwt Decode
A biblioteca JWT DECODE é uma biblioteca utilizada para decodificar tokens JWTs que são codificados. IMPORTANTE: esta biblioteca não valida o token, apenas os decodifica, veja mais na documentação.

Nookies
Nookies é uma biblioteca de cookies para Next.js, com suporte SSR, para setter, parser e destroy, com suporte a servidor Express personalizado, leve e completo para autenticação, veja mais na documentação.

Datefns
A biblioteca Date-fns fornece o conjunto de ferramentas mais abrangente, mas simples e consistente para manipular datas JavaScript em um navegador e Node.js, veja mais na documentação.

Lodash
Lodash é uma biblioteca de utilitários JavaScript que oferece modularidade, desempenho o que faz o JavaScript trabalhar de forma mais dinâmica com matrizes, números, objetos, strings, etc. Os métodos modulares de Lodash são para iteração de matrizes, objetos, strings, manipulação e teste de valores e para criar funções compostas, veja mais na documentação.

React Number Format
Componente React para formatar o número em uma entrada ou como um texto, veja mais na documentação.

React Cookie Consent
Uma barra de consentimento de cookies pequena, simples e personalizável para uso em aplicações React, veja mais na documentação.

Typescript
O TypeScript adiciona sintaxe adicional ao JavaScript criando tipagem para oferecer suporte a uma integração mais estreita com o seu editor fazendo a identificação dos erros no início do seu editor, veja mais na documentação.

ESLint
O ESLint analisa estaticamente seu código para encontrar problemas rapidamente que podem ser corrigidos automaticamente. As correções ESLint reconhecem a sintaxe, então não terá erros introduzidos pelos algoritmos tradicionais de localização e substituição, veja mais na documentação.

Prettier
O Prettier é um code formatter livre (MIT) e de código aberto, que tem por finalidade "forçar" um padrão de código. Ele realiza isso analisando o seu código e alterando-o de acordo com regras pré-definidas, veja mais na documentação.

Casl
CASL é uma biblioteca JavaScript de autorização isomórfica que restringe quais recursos um determinado cliente tem permissão para acessar, serializar e compartilhar permissões entre IU, API e microsserviços. Ele foi projetado para ser adotado de forma incremental e pode ser facilmente escalonado com base em atributo e assunto com todos os recursos. Isso torna mais fácil gerenciar e compartilhar permissões entre componentes de IU, serviços de API e consultas de banco de dados, veja mais na documentação.

Husky
O Husky cria hooks de uma maneira simples. Os hooks são ações que vão ser disparadas em determinados momentos. Ex: antes de um commit podendo forçar um link ou até mesmo executar testes. veja mais na documentação.

Pastas importantes na estrutura do projeto

Public
A pasta public, é a pasta onde se colocam arquivos que deseja que sejam compartilhados externamente no projeto via URL, como por exemplo de imagens.

Pages
Utilizamos NextJS, dessa forma, o framework trabalha com um roteamento baseado nos nomes dos arquivos dentro desta pasta, desta forma a condição básica para criar um novo endereço de acesso na aplicação é simplesmente criar um arquivo (ou pasta) e acessar na aplicação pelo nome dele. Por exemplo um arquivo na raiz da pasta com o nome de posts.tsx indicaria que se acessarmos https://meu.dominio.com/login teremos todo o conteúdo dentro desse arquivo que foi criado. Isso também vale para rotas aninhadas, neste caso podemos criar pastas com o nome das rotas que queremos, por exemplo, dentro de pages temos uma pasta chamada cartao, dentro dela, temos outra pasta chamada antecipacao e dentro desta pasta temos um arquivo index.tsx, desta forma teremos uma rota da seguinte forma https://meu.dominio.com/user/details e veríamos todo o conteúdo dentro dentro dessa index. Um arquivo com o nome de index, sempre vai ser o arquivo com maior prioridade para ser representado como a página daquela rota, isso serve para qualquer caso. E por fim, também temos a possibilidade da criação de rotas dinâmicas, se quisermos por exemplo acessar uma postagem específica de todos os posts, poderíamos ter algo como, uma pasta chamada posts e dentro dela um arquivo index.tsx e uma outra pasta chamada [id] e dentro dela um arquivo index.tsx. O que temos aqui é uma rota chamada posts, e que todo o conteúdo renderizado ao acessá-la seria o que temos na index.tsx desta pasta, e para a rota dinâmica, iríamos acessar dentro de [id]/index.tsx, desta forma o NextJS entende que aquilo pode ser qualquer valor e pode ser acessado https://meu.dominio.com/product/1 ou https://meu.dominio.com/products/ ou qualquer outro valor.

Interfaces
Esta é uma pasta criada para interfaces para lugares específicos, dessa forma tiramos a escrita da tipagem dos outros arquivos e organizamos em um lugar só.

Components
Esta pasta serve para organizar todos os componentes que não são escritos dentro das páginas, ou mesmo uma divisão dentro de um próprio componente. Existem componentes globais que usamos dentro da aplicação geral, e alguns específicos e organizados para páginas ou locais específicos. Dessa forma podemos separar o código e deixar ele mais organizado para futuras manutenções mexer com um local específico e não no componente todo, mas sim apenas em um pedaço.

Context
Esta é um uma pasta para organizar todos os contextos que utilizamos na aplicação. Estamos utilizando a própria Context API do ReactJS sem precisar utilizar Redux, cada contexto tem sua responsabilidade e é separado e dividido de acordo com o propósito.

Models
Esta é um uma pasta para organizar as classes de modelo da aplicação.

Hooks
Esta pasta que foi criada com o intuito de remover a lógica dos componentes quando ela ficar muito grande e complexa para separar a responsabilidade da página/componente que é renderizar as coisas em tela e essa pasta de hooks, seriam custom hooks com a parte lógica para o funcionamento do componente, desta forma temos um arquivo mais limpo do lado que vai renderizar e problemas de lógica podemos resolver em um único local específico pra isso.

Services
Aqui estão organizados arquivos para lidar com serviços externos, primariamente utilizamos para criar a configuração do axios para criar nossa instância de conexão e configuração com a API.

Styles
Nesta pasta ficam os estilos globais e específicos de páginas, como cada componente já possui o seu próprio estilo na pasta, não é possível fazer o mesmo com a pasta pages por conta do roteamento, por isso além de configurações de estilos globais, temos estilos específicos das páginas também aqui, no mesmo formato e hierarquia de pastas que temos em pages para manter o padrão.

Utils
Pasta onde ficam funções e helpers globais que podem ser utilizadas em qualquer local da aplicação.

Como criar novas páginas e criar proteção de rotas?

• Utilizamos SSR ou seja páginas geradas do lado do servidor, veja exemplos de páginas ja criadas
  
• Utilizamos CASL que criar uma forma fácil e segura de permissão de acesso.
  

# Exemplo SSR, inserir após o export default, neste exemplo se o usuário não tem token
# é direcionado para o login ou token inválido a o token é deletado e o usuário direcionado
# para login.

# Imports
import {
  defaultReturn,
  redirectLogin,
  TOKEN_PREFIX,
} from '@/utils/tokensPrefix';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { [TOKEN_PREFIX]: token } = parseCookies(ctx);
  if (!token) {
    return redirectLogin;
  }

  try {
    const result = jwtDecode(token);
    if (!result) {
      destroyCookie(ctx, TOKEN_PREFIX);
      return redirectLogin;
    }
  } catch (error) {
    destroyCookie(ctx, TOKEN_PREFIX);
    return redirectLogin;
  }
  return defaultReturn;
};

# Exemplo para a utilização do CASL, a ACTION é a ação permitida ex. READ, CREATE, UPDATE ou DELETE.
# a FeatureCode é a forma de identificar a permissão para a ação, no exemplo abaixo usuários com o
# plano FREE conseguiria ver o componente/página, pois estão com a ACTION setada como READ e caso não
# tivesse tal ACTION o componente/página não seria exibido.

# 1- Fazer o import.
import { FeatureCodeEnum } from '@/enums/feature';

# 2- Fazer o import.
import { Can } from '@context/ability';

# 3- Utilizar a action e a Feature code, ex:
const { READ, FREE } = FeatureCodeEnum; # FREE é a feature code

# Englobe o element que quer permissionar, ex.
<Can action={READ} subject={FREE}>
  <Box>
    ...componente ou página
  </Box>
</Can>

# arquivo .env.local

NEXT_PUBLIC_ENVIRONMENT=dev
NEXT_PUBLIC_TOKEN_PREFIX=app-name
NEXT_PUBLIC_APP_NAME=App Name
NEXT_PUBLIC_BACKEND_URL=http://localhost:5050

Importante para Executar a aplicação

# Instalação de pacotes
$ npm i nome-do-pacote
# ou
$ yarn add nome-do-pacote

# Para testar, lembre-se que NextJs não abre automaticamente o navegador igual o ReactJs,
# você deve abrir http://localhost:3000/ após o comando bem sucedido no terminal.

# 1- Lembre-se sempre de criar a sua branch e não utilizar a main 👌
# 2- Instale o mongoDb, é com ele que o backend esta feito, a string de conexão esta
# no arquivo .env.local com o nome NEXT_PUBLIC_DB_URL e não precisa de senha, pois você está em dev 👌

# Modo desenvolvimento com (Hot Reload)
$ npm run dev
# ou
$ yarn dev

# Gerando o build e testando local (Sem Hot Reload)
# Fica mais rápido o teste no navegador por ser o build
$ npm run build:start
# ou
$ yarn build:start

# Testando o build antes de fazer deploy, por boas práticas faça isso, e todos os warnings são mostrados
# e se houver erro no projeto tbm, com isso você evita quebrar a esteira no deploy.
$ npm run build
# ou
$ yarn build

# Deploy em Stage (gera um link de testes)
$ npm run deploy:stage
# ou
$ yarn deploy:stage

# Deploy em Produção (Cuidado, teste em stage antes)
$ npm run deploy:production
# ou
$ yarn deploy:production

Padrão de commits, Utilizaremos a documentação do **Conventional Commits**, Commits Semânticos

O commit semântico possui os elementos estruturais abaixo (tipos), que informam a intenção do seu commit ao utilizador(a) de seu código.

• feature- Commits do tipo feature indicam que seu trecho de código está incluindo um novo recurso (se relaciona com o MINOR do versionamento semântico).

• hotfix - Commits do tipo hotfix indicam que seu trecho de código commitado está solucionando um problema (bug fix), (se relaciona com o PATCH do versionamento semântico).

• release - Commits do tipo release indicam que essa ramificação é criada e usada quando os recursos são concluídos e finalizados para uma versão com versão nova versão do app.

• docs - Commits do tipo docs indicam que houveram mudanças na documentação, como por exemplo no Readme do seu repositório. (Não inclui alterações em código).

• test - Commits do tipo test são utilizados quando são realizadas alterações em testes, seja criando, alterando ou excluindo testes unitários. (Não inclui alterações em código)

• build - Commits do tipo build são utilizados quando são realizadas modificações em arquivos de build e dependências.

• perf - Commits do tipo perf servem para identificar quaisquer alterações de código que estejam relacionadas a performance.

• style - Commits do tipo style indicam que houveram alterações referentes a formatações de código, semicolons, trailing spaces, lint... (Não inclui alterações em código).

• refactor - Commits do tipo refactor referem-se a mudanças devido a refatorações que não alterem sua funcionalidade, como por exemplo, uma alteração no formato como é processada determinada parte da tela, mas que manteve a mesma funcionalidade, ou melhorias de performance devido a um code review.

• chore - Commits do tipo chore indicam atualizações de tarefas de build, configurações de administrador, pacotes... como por exemplo adicionar um pacote no gitignore. (Não inclui alterações em código)

• ci - Commits do tipo ci indicam mudanças relacionadas a integração contínua (continuous integration).

☑️ Recomendações

• Adicione um título consistente com o título do conteúdo;
• Recomendamos que na primeira linha deve ter no máximo 4 palavras;
• Para descrever com detalhes, usar a descrição do commit;
• Usar um emoji no início da mensagem de commit representando sobre o commit;
• Um link precisa ser adicionado em sua forma mais autêntica, ou seja: sem encurtadores de link e links afiliados;

💈 Padrões de emojis

Tipo de commit	Emojis	Palavra-chave
Acessibilidade	♿ :wheelchair:
Adicionando um teste	✅ :white_check_mark:	test
Adicionando uma dependência	➕ :heavy_plus_sign:	build
Alterações de revisão de código	👌 :ok_hand:	style
Animações e transições	💫 :dizzy:
Bugfix	🐛 :bug:	fix
Comentários	💡 :bulb:	docs
Commit inicial	🎉 :tada:	init
Configuração	🔧 :wrench:	chore
Deploy	🚀 :rocket:
Documentação	📚 :books:	docs
Em progresso	🚧 :construction:
Estilização de interface	💄 :lipstick:	feat
Infraestrutura	🧱 :bricks:	ci
Lista de ideias (tasks)	🔜 :soon:
Mover/Renomear	🚚 :truck:	chore
Novo recurso	✨ :sparkles:	feat
Package.json em JS	📦 :package:	build
Performance	⚡ :zap:	perf
Refatoração	♻️ :recycle:	refactor
Removendo um arquivo	🔥 :fire:
Removendo uma dependência	➖ :heavy_minus_sign:	build
Responsividade	📱 :iphone:
Revertendo mudanças	💥 :boom:	fix
Segurança	🔒️ :lock:
SEO	🔍️ :mag:
Tag de versão	🔖 :bookmark:
Teste de aprovação	✔️ :heavy_check_mark:	test
Testes	🧪 :test_tube:	test
Texto	📝 :pencil:
Tipagem	🏷️ :label:
Tratamento de erros	🥅 :goal_net:

💻 Exemplos

Comando git	Resultado no GitHub
git commit -m ":tada: Commit inicial"	🎉 Commit inicial
git commit -m ":books: docs: Atualizaçao do README"	📚 docs: Atualizaçao do README
git commit -m ":bug: fix: Loop infinito na linha 50"	🐛 fix: Loop infinito na linha 50
git commit -m ":sparkles: feat: Pagina de login"	✨ feat: Pagina de login
git commit -m ":bricks: ci: Modificaçao no Dockerfile"	🧱 ci: Modificaçao no Dockerfile
git commit -m ":recycle: refactor: Passando para arrow functions"	♻️ refactor: Passando para arrow functions
git commit -m ":zap: perf: Melhoria no tempo de resposta"	⚡ perf: Melhoria no tempo de resposta
git commit -m ":boom: fix: Revertendo mudanças ineficientes"	💥 fix: Revertendo mudanças ineficientes
git commit -m ":lipstick: feat: Estilizaçao CSS do formulario"	💄 feat: Estilizaçao CSS do formulario
git commit -m ":test_tube: test: Criando novo teste"	🧪 test: Criando novo teste
git commit -m ":bulb: docs: Comentários sobre a função LoremIpsum( )"	💡 docs: Comentários sobre a função LoremIpsum( )