nextjs-boilerplate

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

nextjs-boilerplate

★ 224 Open GitHub ↗

🚀 Next.js 16+ boilerplate with typescript, husky, lint-staged, biome, vitest, react-testing-library, storybook, and GH actions.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

![Cover](https://svgshare.com/i/idk.svg)

## :rocket: Features

Developer experience first:

- [Next.js](https://nextjs.org) for Static Site Generator
- Type checking [TypeScript](https://www.typescriptlang.org)
- Integrate with [Tailwind CSS 4](https://tailwindcss.com) (CSS-first configuration)
- [Storybook](https://storybook.js.org) for components documentation
- Strict Mode for TypeScript and React 19
- Linter and Code Formatter with [Biome](https://biomejs.dev)
- [Husky](https://typicode.github.io/husky/#/) for Git Hooks
- [Lint-staged](https://github.com/okonet/lint-staged) for running linters on Git staged files
- Testing with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/)
- Dark mode with [next-themes](https://github.com/pacocoursey/next-themes)
- Component variants with [CVA](https://cva.style/) and [Base UI](https://base-ui.com/) headless components
- Absolute Imports using `@` prefix
- Nextjs custom layouts
- [T3 env](https://env.t3.gg/) Manage your environment variables with ease
- Message convention for git
- Maximize lighthouse score
- GH actions

## 📅 Plans

- [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
- [next-pwa](https://github.com/shadowwalker/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](https://github.com/hadrysm/nextjs-boilerplate/generate)** or create your Next.js app based on this template by running:

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

```shell
pnpm build
```

```shell
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

See [LICENSE](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>

nextjs-boilerplate

Today's picks

Was this content helpful?

Recent Feedback

nextjs-boilerplate

Today's picks

Was this content helpful?

Recent Feedback

Download README