https://github.com/astroonauta/next-js-boilerplate
A personal Next JS 14+ boilerplate: Typescript + Chakra UI + Prettier + ESLint + Pre-commit (Husky + Lint-staged) + Cypress (e2e + component)
https://github.com/astroonauta/next-js-boilerplate
boilerplate chakraui cypress eslint frontend husky lintstaged next nextjs precommit prettier typescript
Last synced: 3 months ago
JSON representation
A personal Next JS 14+ boilerplate: Typescript + Chakra UI + Prettier + ESLint + Pre-commit (Husky + Lint-staged) + Cypress (e2e + component)
- Host: GitHub
- URL: https://github.com/astroonauta/next-js-boilerplate
- Owner: AstrOOnauta
- License: isc
- Created: 2023-05-06T16:30:35.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T20:59:09.000Z (over 1 year ago)
- Last Synced: 2025-01-21T10:47:11.634Z (over 1 year ago)
- Topics: boilerplate, chakraui, cypress, eslint, frontend, husky, lintstaged, next, nextjs, precommit, prettier, typescript
- Language: TypeScript
- Homepage: https://next-js--boilerplate.vercel.app
- Size: 1.47 MB
- Stars: 72
- Watchers: 3
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# 🚀 Next.js 16 Boilerplate – TypeScript, Chakra UI, ESLint, Prettier, Husky & Cypress
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!**
---
---
## 🕰️ 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`
---
Thanks for stopping by! 😁