Next.jsReactStarter

nextjs-boilerplate — Next.js Starter Template

By hadrysm

A Next.js and React starter template integrating TypeScript, Tailwind CSS, Biome, Husky, Vitest, Storybook, and GitHub Actions, suitable for quickly building frontend projects with a complete development toolchain.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Integrates development toolchain including TypeScript, Biome, Husky, and lint-staged

02

Built-in Vitest and React Testing Library test configuration, with test directory mirroring src structure

03

Uses Tailwind CSS 4's CSS-first configuration approach

04

Provides Storybook for component documentation

05

Supports next-themes dark mode and CVA, Base UI component variants

06

Includes GitHub Actions workflows

Template Details

This template is a Next.js starter focused on developer experience, using the App Router and integrating TypeScript type checking, Tailwind CSS 4's CSS-first configuration, Biome code checking and formatting, Husky Git hooks, lint-staged staged file checks, Vitest and React Testing Library testing, Storybook component documentation, next-themes dark mode, CVA and Base UI component variants, T3 env environment variable management, and GitHub Actions. The project uses pnpm as its package manager, with test files located in the __tests__/ directory mirroring the src/ structure, and shared test utilities in __tests__/test-utils.tsx.

Usage supports generating a repository via GitHub's Use this template, or running pnpm create next-app -e <template URL> to create a project. When deploying to Vercel, the install command is corepack use pnpm@`pnpm -v` && pnpm i; locally, pnpm build and pnpm start can be used to view production mode.

Regarding limitations, the Bundler Analyzer and next-pwa listed in the README are still in the planning stage and not yet included in the template. The template is MIT licensed, and the free scope is limited to this version of the code; third-party assets such as demo images, fonts, and icons must be checked against their respective licenses, and external services such as domains, hosting, and databases may incur additional charges.

Next.jsReactStarter

Is it right for your project?

Use Cases

  • Quickly starting a Next.js project with a complete development toolchain
  • Frontend engineering requiring TypeScript strict mode and code checking, formatting configuration
  • Projects wanting to write component tests using Vitest and React Testing Library
  • Teams needing Storybook to maintain component documentation
  • Projects planning to deploy on Vercel and configure GitHub Actions

Suitable For

  • Frontend developers using Next.js App Router
  • Teams valuing developer experience and code quality toolchain
  • New projects needing testing and component documentation infrastructure
  • Developers wanting to quickly generate a repository via template and extend it themselves

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Can generate a repository via GitHub's Use this template, or run pnpm create next-app -e <template URL> to create a project

  2. 2

    Package manager uses pnpm; Vercel install command is corepack use pnpm@`pnpm -v` && pnpm i

  3. 3

    Locally, pnpm build and pnpm start can be used to view production mode

  4. 4

    Test files are placed in the __tests__/ directory mirroring the src/ structure, with shared test utilities in __tests__/test-utils.tsx

  5. 5

    Bundler Analyzer and next-pwa in the README are still planned items and not yet included in the template

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license from the public repository; the free scope is limited to this version of the code and does not imply that external services or third-party assets are free.

Must comply with when using

  • Permits free use, modification, commercial use, and distribution of this version of the code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as-is; warranties and liability limitations are governed by the original license and applicable law.

Additional costs & items to verify

  • The Plans section of the README lists Bundler Analyzer and next-pwa as planned items, not yet included in the template; these are features that may be added in the future and are not provided in the current version.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely based on the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

- [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) - [next-pwa](https://github.com/shadowwalker/next-pwa)

Original README
https://github.com/hadrysm/nextjs-boilerplate/blob/main/LICENSEhttps://github.com/hadrysm/nextjs-boilerplate/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 96 / 100
Technologies
Next.js · React
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-09-11
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: c6ffb05415ef779ff0ca7e5a3d9dfcd64669cba2c4454b4ebebef54fd12cb49a

2026-10-02T09:24:05.788Z

Source file / repository
# 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>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.