nextjs-boilerplate - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #llm #golang #android #deep-learning #docker #macos #windows #kubernetes #vue #security #pytorch #openai

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

# Installation Guide

1. Get the code

git clone https://github.com/hadrysm/nextjs-boilerplate

Downloads the entire project code from GitHub to your computer.

cd nextjs-boilerplate

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Type this command into your terminal and run it.

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

Type this command into your terminal and run it.

pnpm build

Type this command into your terminal and run it.

pnpm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

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