nextjs-boilerplate - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #rust #deep-learning #awesome #cli #awesome-list #vue #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.

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd nextjs-boilerplate

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

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

이 명령어를 터미널에 그대로 입력해 실행하세요.

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

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm build

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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>