🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js (app routing), 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
- T3 env Manage your environment variables with ease
- 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. 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:
pnpm create next-app -e https://github.com/hadrysm/nextjs-boilerplateInstall command on Vercel:
corepack use pnpm@`pnpm -v` && pnpm i
You can see the results locally in production mode with:
pnpm buildpnpm startpnpm 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 © 2024
See LICENSE for more information.
Made with much ❤️ and 💪 by Mateusz Hadryś 😊 My Contact