Standardize Your Next.js Workflow: Pre-Commit Hooks, Linting, and Commitizen Explained

Maintaining clean, consistent code in a growing Next.js project isn’t just best practice — it’s essential. Whether you’re working solo or in a team, setting up a standardized workflow can save time, reduce bugs, and keep your commit history readable. In this guide, you’ll learn how to supercharge your Next.js development process with tools like Husky for Git hooks, lint-staged, Prettier, ESLint, and Commitizen. We’ll walk through each step to automate formatting, catch errors early, and enforce structured commit messages — all to help you write better code and ship with confidence.

Whether you’re building solo or as part of a team, maintaining code quality and consistency in a Next.js project is crucial. This comprehensive guide will help you set up a powerful workflow using:

▪️Husky for Git hooks

▪️Lint-staged runs linters and formatters only on staged files

▪️Prettier for consistent code formatting

▪️ESLint for catching bugs and enforcing standards

▪️Commitizen + Commitlint for standardized commit messages

▪️git-cz to launch commit prompts interactively

Why This Setup Matters

✅ Auto-lints and formats only the files you’ve staged

✅ Blocks bad commit messages like any: fixed stuff

✅ Prompts you to write clear, meaningful commit messages

✅ Saves time during code reviews

✅ Scales well for teams and long-term solo projects

Project Configuration

📥Install All Required Dev Dependencies

Initialize Husky

Set up Commitizen

📄Configuration Files & Where to Place Them

1. package.json (in root directory)

2. prettierrc (in root directory)

3. eslint.config.mjs (in root directory)

Use this if you’re using the latest ESLint flat config (ESLint v9+).
Make sure ESLint is invoked via this config (e.g., eslint.config.mjs).

4. commitlintrc.json (in root directory)

🗂️ .husky/ Directory Setup

Initialize Husky if not done:

.husky/pre-commit

.husky/commit-msg

Make both executable:

The Commit Flow — In Practice

1. Stage your files:

2. Run the commit wizard:

This launches Commitizen (via git-cz) and prompts:

▪️Type (feat, fix, chore…)

▪️Scope

▪️Description

▪️Breaking changes/issues

3. Husky hooks fire automatically:

▪️pre-commit runs npx lint-staged

▪️commit-msg validates the commit message

If you try any updated code, it will fail validation.

If you use feat(login): added OTP support, it’s accepted.

What Lint-staged Does

You do not need to run npx lint-staged manually. When you run npm run commit, Git triggers the pre-commit hook, and lint-staged is executed.

Your config:

This ensures only staged files are auto-formatted and auto-linted before the commit is finalized.
No more “you missed a semicolon again.”

Final Result — What You Gain

▪️Consistent codebase without manual formatting

▪️No bad commits (like any: committed some task I dont know which)

▪️Commit messages are clear and standardized

▪️Git history is searchable and clean

▪️You spend less time reviewing style issues in PRs

Optional Enhancements

You can extend Husky hooks to include:

▪️pre-push: Run tests before pushing

▪️post-merge: Auto-install deps

▪️prepare-commit-msg: Auto-append Jira tickets

Want to run tests only on changed files before commit?