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

🚀 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!

---

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

---

🕰️ Old Versions

• Version 15.x
• Version 14.x
• Version 13.x

---

🧠 System Requirements

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

---

💻 Technologies Used

• Next.js
• TypeScript
• Chakra UI
• ESLint
• Prettier
• Husky
• Lint-staged
• Cypress

---

🚀 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

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

2. Initialize Husky

yarn husky-install
# OR
npm run husky-install

3. Run the development server

yarn dev
# OR
npm run dev

Open 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

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

2. Install dependencies

yarn
# OR
npm install

3. Initialize Husky

yarn husky-install
# OR
npm run husky-install

4. Run the development server

yarn dev
# OR
npm run dev

Open 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.

---

📈 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

---

<strong>Thanks for stopping by! 😁</strong>