Boilerplate Next.js + TypeScript + Tailwind CSS

Next.js + TypeScript + Tailwind CSS boilerplate with some extras.

Intro

This repository is heavily-inspired by Clarence's Next.js starter pack. With some issues raising after Next.js change the standard from Page Router to App Router, I decide to do fresh-install the latest Next.js version and try to remodel the starter pack on top of that.

This boilerplate was intended for my own personal use—I want to make it as light and simple as possible—so I remove some features from the original starter pack. If you find it useful, feel free to use it for your project. As for the license, this project is MIT Licensed.

Features

This repository is packed with:

• ⚡️ Next.js 14 with App Router
• ⚛️ React 18
• ✨ TypeScript
• 💨 Tailwind CSS 3 — with prettier-plugin-tailwindcss for sorting Tailwind classes
• Using default NPM package manager

Original features that has been preserved:

- 📏 ESLint — Find and fix problems in your code, also will **auto sort** your
  imports
- 💖 Prettier — Format your code consistently
- 🐶 Husky & Lint Staged — Run scripts on your staged files before they are
  committed
- 🤖 Conventional Commit Lint — Make sure you & your
  teammates follow conventional commit
- ⏰ Release Please — Generate your changelog by activating the `release-please`
  workflow
- 👷 Github Actions — Lint your code on PR
- 🚘 Automatic Branch and Issue Autolink — Branch will be automatically created
  on issue **assign**, and auto linked on PR
- 🔥 Snippets — A collection of useful snippets

Addition:

- 👷 Github Actions — Add Dependency Review action on PR
- 💁‍♂️ Conventional Commit Prompt — Enable commit via terminal prompt using `commitizen` + `cz-git` that follows your commit message configuration.

I recommend you to install commitizen on your machine globally

npm install -g commitizen czg

So you can simply use git cz, git-cz or just cz instead of git commit when committing.

You can also use alias for common commit messages, eg. type npx czg :ur in your terminal for "docs: update README" commit message. Add your definition on commitlint.config.js.

Getting Started

1. Clone this template

1. Use this repository as template:

   Through Use this template green button on top of the page.

2. Using create-next-app

   npx create-next-app -e 'https://github.com/onpilot/boilerplate-nextjs-ts-tailwind' project-name

2. Install dependencies

npm install

3. Install Husky hooks

npx husky install

4. Run the development server

You can start the server using this command:

npm run dev

Open http://localhost:3000 with your browser to see the result. Start editing the page by modifying app/page.tsx.

4. Change defaults

There are some things you need to change.

Find all comments with !STARTERCONF, then follow the guide.

Don't forget to change the package name in package.json

5. Commit Message Convention

This starter is using conventional commits, it is mandatory to use it to commit changes.

6. Release Please Action

You may need to set "Allow GitHub Actions to create and approve pull requests" under repository Settings > Actions > General.

Attribution

For more details, please check Clarence's blog post and repository:

• Blog: One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects
• Repo: Next.js + Tailwind CSS + TypeScript Starter and Boilerplate