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