nathaliacristina20 / boilerplate-nextjs

Boilerplate to applications NextJS with Typescript, PWA, StoryBook, Jest, Styled Components, ESlint, Plop and Husky

Boilerplate Next.js

Sobre | Tecnologias | Guia de instalação e execução | Licença

🚀 Sobre

Este boilerplate foi desenvolvido com o objetivo de automatizar a criação de novos projetos. O Next.js foi escolhido como principal tecnologia por ser um framework React.js opinativo, com estruturas e ferramentas definidas além de ter suporte para criação de páginas SSG, SSR e SPA e facilidade na transformação das aplicações em PWA.

O Typescript foi adicionado para dar poder tanto ao Next.js como para o Storybook que é a biblioteca escolhida para a documentação de componentes deste template.

O ambiente de testes foi configurado com JEST, e algumas automações foram incluídas:

• lint com ESlint e Prettier em tempo real
• execução automática do lint e testes unitários a cada commit com Husky para evitar commits quebrados
• criação de componentes com plop (incluindo o arquivo de styles, teste e história do storybook)

💻 Tecnologias

• Next.js
• Typescript
• Styled Components
• Storybook
• Jest
• Plop
• Husky
• ESlint
• Prettier

📚 Guia de instalação e execução

Pré-requisitos

• Git
• Node.js
• Yarn

Como executar

• Execute yarn create next-app -e https://github.com/nathaliacristina20/boilerplate-nextjs em seu terminal
• Vá até o diretório da pasta criada cd nome_do_seu_projeto
• Execute yarn para instalar as dependências
• Execute yarn dev para rodar a aplicação em desenvolvimento e abra http://localhost:3000 em seu navegador
• Execute yarn storybook e abra http://localhost:6006 em seu navegador
• Execute yarn test em seu terminal para rodar os testes. Caso deseje que os testes fiquem executando e assistindo modificações em paralelo ao desenvolvimento, execute yarn test:watch

Caso deseje ver um relatório da cobertura abra o arquivo index.html gerado em coverage/lcov-report. Este relatório fica disponível somente após a primeira execução dos testes.

Caso deseje ver um relatório do PWA com o Google Lighthouse execute yarn build antes de utilizar esta ferramenta.

Para criar um componente novo

• Execute yarn generate e siga o que for pedido

📃 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

by Nathalia Cristina 👋 Get in touch!