Durante o curso de Aprenda NextJS na Prática, ministrada pelo Willian Justen na Udemy, foi apresentado vários conceitos para a utilização do NextJS com boas práticas e tecnologias que contribuem para o desenvolvimento. Ao ver este Boilerplate, vi que seria um bom modelo para uso em projetos futuros, para isso fiz algumas alterações deixando ele mais padrão, com configurações extras e algumas bibliotecas necessárias para seu uso. Dessa forma iria ter um Boilerplate que pdoeria utilizar em vários projetos e com uma base sólida de uso, por isso decidi montá-lo e publicar.
Neste boilerplate tem algumas tecnologias atuais para um bom desenvolvimento e para performance do site. Dentre elas:
- NextJS
- Typescript
- Styled Components
- Jest
- Testing Library
- Husky + Lint-staged
- ESLint
- Prettier
- Next SEO
- Nextjs Progressbar
- PWA (Pelo script está somente possível em produção)
- Editorconfig
Nessa sessão será divida em três partes, seguindo com NPM e utilizando em um sistema operacional Ubuntu, porém nada impede de atualizar ou mesmo utilizar com yarn, sendo as seguintes:
Ter o gerenciador de pacotes NPM instalado para realizar essas configurações. Além disso para o salvamente com o ESlint formato, recomendo que use o VSCode para realizar a codificação da aplicação.
- Para realizar o uso desse boilerplate, use na pasta onde deseja montar o projeto:
npx create-next-app -e https://github.com/NathanaelCruz/boilerplate - Com isso ira construir sua aplicação Next utilizando como base esse boilerplate.
- Após a criação do projeto, caso queira pode retirar algumas dependências no
package.json, porém se for utilizar todas pode realizar os seguintes comandos.npm installpara inicializar a instalação dos pacotes- Agora na pasta raiz, caso queira subir seu projeto no github,
rm -rf .gitpara remover o git dessa pasta. - Com isso feito, basta realizar
git initinicializando o git e seguindo a conexão com seu repositório desejado. - Agora basta utilizar o
npx husky initpara começar a rodar o githook.
- Com isso já esta sendo possivel realizar o
npm run dev,npm run buildenpm run start
As configurações aqui serão ditas onde ode ser alterado para melhor se adaptar a você.
- Os passos a seguir é caso utilize um gerenciador de pacotes diferente do NPM
- Inicialmente pode realizar as configuraçes no
package.json, nos objetos scripts e lint-staged. - Após configurar esses comandos para seu gerenciador de pacote, necessita mudar o arquivo
[Raiz do projeto]/.husky/pre-commit, na ultima linha onde se utilizar o npm
- No caminho
[Raiz do projeto]/public/manifest.jsonrealizar a alteração para o seu projeto, sendo o mesmo utilizado para o PWA no build. - No caminho
[Raiz do projeto]/next-seo.config.tsfazer o preenchimento conforme o seu projeto para o SEO padrão das páginas. - No caminho
[Raiz do projeto]/src/styles/theme.tspossui as váriaveis de tema que pode trocar ou ajustar conforme o projeto. - No caminho
[Raiz do projeto]/src/pages/_app.tsxpara alterar as metatags entre o comoponente Head.
Para os testes terá os comando a seguir, porém, para melhor compreender, a forma que o boilerplate está montado é para o momento que for realizar um teste ele percorrer somente as pastas que de fato tem um teste dentro, ignorando alguns arquivos desnecessarios.
Essa sessão mostra os comandos possiveis e configurados, não abordando os npm run dev, npm run build e npm run start que são padrões.
npm run lint- Realiza a verificação do ESlint nas páginas para verificar se há alguma formatação errada, não tolerando nenhum warning.npm run test- Realiza os testes atravs do jest rodando as pastas que realmente possuem algum teste válido.npm run test:watch- Funciona como o test acima porém ele fica "escutando" e validando caso haja alguma mudança.
Desenvolvido em 2021