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.

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

:information_source: 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

:gear: 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 :heart: and :muscle: by Mateusz Hadryś :blush: My Contact