create-next-js-boilerplate/README.md

Next.js 16 Boilerplate with TypeScript, Chakra UI, ESLint, Prettier, Husky, and Cypress — a complete starter template to build fast, scalable, and modern web applications.

<div align="center">
    <img src="https://github.com/AstrOOnauta/next-js-boilerplate/blob/main/public/images/dev-libraries.jpg" alt="Next.js Boilerplate with TypeScript, Chakra UI, ESLint, Prettier, Husky, and Cypress setup">
</div>

# 🚀 Next.js 16 Boilerplate – TypeScript, Chakra UI, ESLint, Prettier, Husky & Cypress

<p align="center">
  <a href="https://www.npmjs.com/package/create-next-js-boilerplate">
    <img src="https://img.shields.io/npm/v/create-next-js-boilerplate.svg?style=flat-square">
  </a>
  <a href="https://www.npmjs.com/package/create-next-js-boilerplate">
    <img src="https://img.shields.io/npm/dt/create-next-js-boilerplate.svg?style=flat-square&color=success">
  </a>
  <a href="https://github.com/AstrOOnauta/next-js-boilerplate">
    <img src="https://img.shields.io/github/stars/AstrOOnauta/next-js-boilerplate?style=flat-square&color=success"/>
  </a>
  <a href="https://github.com/AstrOOnauta/next-js-boilerplate/issues">
    <img src="https://img.shields.io/github/issues/AstrOOnauta/next-js-boilerplate?style=flat-square&color=blue"/>
  </a>
  <a href="https://github.com/AstrOOnauta/next-js-boilerplate/pulls">
    <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/next-js-boilerplate?style=flat-square&color=blue"/>
  </a>
  <a href="https://github.com/AstrOOnauta/next-js-boilerplate/blob/main/LICENSE.md">
    <img src="https://img.shields.io/:license-isc-yellow.svg?style=flat-square"/>
  </a>
</p>

A complete **Next.js 16 starter template** configured with **TypeScript**, **Chakra UI**, **ESLint**, **Prettier**, **Husky**, and **Cypress**.  
Perfect for developers who want to build fast, scalable, and modern web applications using the latest **Next.js** features.

---

## 🧩 About This Boilerplate

This project is a **Next.js boilerplate** built with **TypeScript**, **Chakra UI**, **ESLint**, **Prettier**, **Husky**, and **Cypress** — designed to help you start new projects quickly and with the best development experience.

It includes:

- ⚙️ A clean, scalable architecture;
- 🎨 Theming support (light/dark) with Chakra UI;
- 🧪 E2E and component testing with Cypress;
- ✅ Automated linting, formatting, and pre-commit checks;
- 🚀 SEO-friendly configuration out of the box.

**Get this starter project and maximize your experience as a developer!**

---

<div align="center">
    <a href="https://www.buymeacoffee.com/astroonauta" target="_blank">
        <img src="https://survivingmexico.files.wordpress.com/2018/07/button-gif.gif" alt="Buy Me A Coffee" style="height: auto !important;width: 60% !important;">
    </a>
</div>

---

## 🕰️ Old Versions

- [Version 15.x](https://github.com/AstrOOnauta/next-js-boilerplate/tree/v15.x)
- [Version 14.x](https://github.com/AstrOOnauta/next-js-boilerplate/tree/v14.x)
- [Version 13.x](https://github.com/AstrOOnauta/next-js-boilerplate/tree/v13.x)

---

## 🧠 System Requirements

- Node.js **22.x or later**
- macOS, Windows (including WSL), and Linux supported

---

## 💻 Technologies Used

- [Next.js](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Chakra UI](https://chakra-ui.com/)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Husky](https://typicode.github.io/husky/#/)
- [Lint-staged](https://github.com/okonet/lint-staged)
- [Cypress](https://www.cypress.io/)

---

## 🚀 Features of the Next.js 16 Boilerplate

- ⚛️ Full **Next.js** setup (SSR, SSG, API routes, and more)
- 🎨 Styling with **Chakra UI**
- 🌓 Dark and light theme configuration
- 🛠 **TypeScript** support
- 📝 Linting and formatting via **ESLint** + **Prettier**
- ✅ Pre-commit hooks with **Husky** + **lint-staged**
- 🧪 E2E and component testing via **Cypress**
- ✨ Absolute imports (`~`)
- 📁 Minimal and organized folder structure
- 🔍 SEO-friendly configuration
- ⚡ Ready for production deployment

---

## ⚙️ Automatic Installation

### 1. Create a new project

```bash
yarn create next-js-boilerplate
# OR
npx create-next-js-boilerplate
```

### 2. Initialize Husky

```bash
yarn husky-install
# OR
npm run husky-install
```

### 3. Run the development server

```bash
yarn dev
# OR
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.  
Edit `pages/index.tsx` — the page updates automatically as you save.

---

## 🧰 Manual Installation

### 1. Clone the repository

```bash
git clone https://github.com/AstrOOnauta/next-js-boilerplate.git
```

### 2. Install dependencies

```bash
yarn
# OR
npm install
```

### 3. Initialize Husky

```bash
yarn husky-install
# OR
npm run husky-install
```

### 4. Run the development server

```bash
yarn dev
# OR
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) and start building!

---

## 🧑‍💻 Terminal Commands

| Command         | Description                      |
| --------------- | -------------------------------- |
| `dev`           | Runs the app on `localhost:3000` |
| `build`         | Creates the production build     |
| `start`         | Runs a production server         |
| `prettier`      | Formats all files                |
| `lint`          | Runs ESLint                      |
| `lint-staged`   | Lints only staged files          |
| `husky-install` | Initializes Husky                |
| `type-check`    | Runs TypeScript checks           |
| `cypress:open`  | Opens Cypress UI                 |
| `cypress:run`   | Runs Cypress tests in CLI        |

---

## 💡 Why Use This Template?

- Save hours of setup time — everything is pre-configured
- Enforce code quality and consistency automatically
- Start coding immediately with TypeScript + Chakra UI
- Perfect for MVPs, startups, or production-grade apps
- Compatible with macOS, Windows, and Linux

---

## 🤝 Contributing

Contributions are welcome!  
Feel free to **open an issue** or **submit a pull request** to improve this Next.js boilerplate.

---

## 📜 License

This project is licensed under the [ISC License](./LICENSE.md).

---

## 📈 Keywords

`nextjs boilerplate`, `next.js starter template`, `next.js 16`, `typescript`, `chakra-ui`, `eslint`, `prettier`, `husky`, `lint-staged`, `cypress`, `react starter`, `frontend boilerplate`, `create next app`

---

<div align="center">
    <br>
    <strong>Thanks for stopping by! 😁</strong>
</div>