next-boilerplate 🚀

Developer Ready: A comprehensive template. Works out of the box for most Next.js projects. This project is intended to be used with the latest active release of Next.js.

Instant Value - All basic tools included and configured:

• 🚀 Typescript >= 5.5.4
• 🌐 Next.js >= 14.2.9
• 🌐 React.js >= 18.3.1
• 🧅 Use Bun as package manager
• 🌈 ESM
• 🧹 ESlint with some initial rules recommendation
• 🧪 Biome for code formatting and linting
• ✅ Jest or Bun test for fast unit testing and code coverage
• 📚 Type definitions for Bun.js and Jest
• 🎨 Prettier to enforce consistent code style
• ⚙️ EditorConfig for consistent coding style
• 📦 NPM scripts for common operations
• 📝 Simple example of Tsx code
• 🐗 Run tasks with Grunt (example for backup)
• 🖥️ Ungit for version control (git) with a GUI
• ⚡ Use Turbopack to provides a fast and flexible development experience for Next.js apps of any size
• 🧪 E2E test with Playwright
• 🐳 Containerization for easy deployment and scaling with Docker
• 🧺 Pre-configured setup for Redux or Zustand as state manager, easily removable if not needed
• 🌀 Tailwind CSS already set up with PostCSS for flexible usage
• 🩷 Sass extends CSS with features like variables, nested rules, mixins, imports, inheritance, built-in functions, and more ...

You can customize your website faster with PLUM, a mixins toolset powered by SASS. Quickly produce consistent, scalable CSS output, regardless of project size. For the best experience, it is recommended to use SASS version 1.77.6 to ensure smooth integration with PLUM.

---

📌 Usage

To use this template, use the following commands:

bun create github.com/RajaRakoto/next-boilerplate <project-name>
cd <project-name>
bun run pkg-upgrade # to upgrade outdated dependencies in interactive mode

1. This starter kit uses the MIT license with my name and GitHub profile—update or remove if needed.
2. Each subdirectory in src has a README.md to explain its structure.
3. Adjust the package.json (name, description, author, etc.) to fit your project.

---

📌 NPM Scripts

Preview

• 📜 preview - Run your app with preview mode.

Clean

• 📜 clean - Remove coverage data, prod folder, playwright-report ...

Development

• 📜 dev - Launch Next.js development server using Turbopack.

Build

• 📜 build - Build Next.js app.

Testing

• 📜 test:unit - Run unit testing with Bun.js.
• 📜 test:unit:watch - Interactive watch mode to automatically re-run unit testing with Bun.js.
• 📜 test:e2e - Run end to end (e2e) testing with Playwright.

Linting and Formatting

• 📜 biome:start - Starts the Biome daemon server. You can specify a custom configuration file path using the --config-path option.
• 📜 biome:stop - Stops the Biome daemon server.
• 📜 biome:fix - Runs a source code check and applies automatic fixes (linter & formatter) according to the defined rules.
• 📜 biome:unsafe - Works like biome:fix, but may apply more invasive or risky changes.
• 📜 eslint - Lints the project with ESLint and reports unhandled errors.
• 📜 prettier - Formats code according to the .prettierrc rules.

Backup and Dependency Management

• 📜 backup - Backup files with Grunt.
• 📜 pkg-check - Check useless dependencies with depcheck.
• 📜 pkg-upgrade - Upgrade outdated dependencies (interactive mode) with npm-check-updates.

Versioning

• 📜 versioning - Start ungit server.

NPM Commands

• 📜 npm-version:major - Increments the major version number of your project using npm.
• 📜 npm-version:minor - Increments the minor version number of your project using npm.
• 📜 npm-version:patch - Increments the version patch number of your project using npm.

NVM

• 📜 nvm - Manage multiple node.js versions. Easily switch between node versions per project to ensure compatibility.

Scripts

• 📜 script:sass-charset - Adds the @charset "UTF-8" declaration at the beginning of all SCSS files in the project.

---

📌 Similar

You can also check out my other starter projects:

• 🚀 bun-boilerplate
• 🚀 node-boilerplate
• 🚀 react-boilerplate
• 🚀 qwik-boilerplate
• 🚀 vscode-boilerplate
• 🚀 cli-boilerplate