🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, React Testing Library, PostCSS, Tailwind CSS, Storybook, Plop, GH actions.
Developer experience first:
- Next.js for Static Site Generator
- Type checking TypeScript
- Integrate with Tailwind CSS
- Storybook for components documentation
- Strict Mode for TypeScript and React 18
- Linter with ESLint
- Code Formatter with Prettier
- Husky for Git Hooks
- Lint-staged for running linters on Git staged files
- Testing with Jest and react-testing-library
- Absolute Imports using
@prefix - Nextjs custom layouts
- Message convention for git
- Maximize lighthouse score
- GH actions
- Components generation with Plop and atomic design convention
All tests are collocated with the source code inside the same directory. So, it makes it easier to find them. Unfortunately, it is not possible with the pages folder used by Next.js for routing (app/ soon 🤟🏻). So, what is why we have a __tests__ folder to write tests from files located in pages folder. Coverage threshold is set to 70%. In the .jest folder there is a custom provider for the all tests.
To use this template you can simply click in Use this template or create your Next.js app based on this template by running:
yarn create next-app -e https://github.com/hadrysm/nextjs-boilerplateYou can see the results locally in production mode with:
yarn buildyarn startyarn generate ButtonResult (if you chose an atom component):
└── components
└── atoms
└── Button
├── index.ts
├── Button.stories.tsx
├── Button.test.tsx
└── Button.tsx
- Fork this repository;
- Create your branch:
git checkout -b my-awesome-contribution; - Commit your changes:
git commit -m 'feat: Add some awesome contribution'; - Push to the branch:
git push origin my-awesome-contribution.
Licensed under the MIT License, Copyright © 2022
See LICENSE for more information.
Made with much ❤️ and 💪 by Mateusz Hadryś 😊 My Contact