Boilerplate and Starter for Next.js 16, Tailwind CSS 4 and TypeScript

🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js (app routing), TypeScript, Biome, Husky, Lint-Staged, Vitest, React Testing Library, PostCSS, Tailwind CSS, Storybook, GH actions.

:rocket: Features

Developer experience first:

• Next.js for Static Site Generator
• Type checking TypeScript
• Integrate with Tailwind CSS 4 (CSS-first configuration)
• Storybook for components documentation
• Strict Mode for TypeScript and React 19
• Linter and Code Formatter with Biome
• Husky for Git Hooks
• Lint-staged for running linters on Git staged files
• Testing with Vitest and React Testing Library
• Dark mode with next-themes
• Component variants with CVA and Base UI headless components
• Absolute Imports using @ prefix
• Nextjs custom layouts
• T3 env Manage your environment variables with ease
• Message convention for git
• Maximize lighthouse score
• GH actions

📅 Plans

• Bundler Analyzer
• next-pwa

🧪 Testing

Tests live in the __tests__/ directory with a mirrored structure matching src/. Shared test utilities are in __tests__/test-utils.tsx. Run tests with pnpm test (Vitest).

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

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

shellCopy
pnpm build

shellCopy
pnpm start

🤝 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-2026

See LICENSE for more information.

---

Made with much :heart: and :muscle: by Mateusz Hadryś :blush: <a href="https://www.linkedin.com/in/mateusz-hadry%C5%9B/">My Contact</a>