nextjs-boilerplate - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #go #machine-learning #docker #nodejs #awesome #cli #awesome-list #security #mcp #open-source

nextjs-boilerplate

(★ 224)

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

File Explorer

Download Latest Version (.zip)

- - frontend-design
- - dependency-review.yml
  - main.yml
- dependabot.yml
- commit-msg
- pre-commit
- pre-push
- main.ts
- preview.tsx
- - fileMock.js
  - styleMock.js
- setup.ts
- test-utils.tsx
- - 2026-03-01-biome-migration-design.md
  - 2026-03-01-biome-migration.md
  - 2026-03-01-demo-component-design.md
  - 2026-03-01-demo-component-plan.md
  - 2026-03-01-documentation-update-design.md
  - 2026-03-01-documentation-update-plan.md
  - 2026-03-01-full-dependency-update-design.md
  - 2026-03-01-full-dependency-update.md
  - 2026-03-01-shadcn-baseui-design.md
  - 2026-03-01-shadcn-baseui-plan.md
  - 2026-03-01-vitest-migration-design.md
  - 2026-03-01-vitest-migration-plan.md
- favicon.ico
- vercel.svg
- - layout.tsx
  - page.tsx
- - .gitkeep
- - .gitkeep
- - globals.css
.env.example
.gitignore
biome.json
CHANGELOG.md
CLAUDE.md
LICENSE
next-env.d.ts
next.config.mjs
package.json
pnpm-lock.yaml
postcss.config.js
README.md
SECURITY.md
skills-lock.json
tsconfig.json
vitest.config.ts

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

Licensed under the MIT License, Copyright © 2024-2026

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>