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

🚀 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.

🚀 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
• 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

📅 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. 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:

pnpm create next-app -e https://github.com/hadrysm/nextjs-boilerplate

🚀 Deploy to production

Install command on Vercel:

corepack use pnpm@`pnpm -v` && pnpm i

You can see the results locally in production mode with:

pnpm build

pnpm start

⚙️ Generating components

pnpm 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 © 2024

See LICENSE for more information.

---

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