Boilerplate and Starter for Next JS 13+, Tailwind CSS 3 and TypeScript

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.

🚀 Features

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

Plans

• Bundler Analyzer
• next-pwa

Testing

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.

ℹ️ How To Use

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-boilerplate

Deploy to production

You can see the results locally in production mode with:

yarn build

yarn start

⚙️ Generating components

yarn generate Button

Result (if you chose an atom component):

 components
       atoms
         Button
           index.ts
           Button.stories.tsx
           Button.test.tsx
           Button.tsx

Contributing

1. Fork this repository;
2. Create your branch: git checkout -b my-awesome-contribution;
3. Commit your changes: git commit -m 'feat: Add some awesome contribution';
4. Push to the branch: git push origin my-awesome-contribution.

License

Licensed under the MIT License, Copyright 2022

See LICENSE for more information.

Made with much ❤️ and 💪 by Mateusz Hadry 😊 My Contact