DEV Community

Cover image for Level Up Your Git Workflow with Husky in Next.js 🚀🔧
Ritesh Kumar Sinha
Ritesh Kumar Sinha

Posted on

Level Up Your Git Workflow with Husky in Next.js 🚀🔧

#webdev #javascript #productivity #programming

As frontend developers, especially working in teams or production-level apps, keeping our code clean, consistent, and error-free is super important.

That’s where Husky comes in — think of it as a helpful friend who makes sure your code is in good shape before you commit or push it.

🤔 What is Husky?

Husky is a tool that lets you run scripts automatically at certain Git events, like:

  • Before committing code (pre-commit)
  • Before pushing to a remote repo (pre-push)

You can use it to:

  • Run a linter
  • Format code with Prettier
  • Run tests
  • Run build checks
  • ... and more!

🛠 Why use Husky?

Let’s say you're working on a Next.js app. You want to make sure:

  • All code follows the same formatting (Prettier)
  • There are no linting errors (ESLint)
  • Tests pass before code goes to GitHub
  • You don’t accidentally push broken code

With Husky, this all happens automatically when you try to commit or push your code.

🚀 Setting Up Husky in a Next.js Project

Let’s walk through how to set up Husky with linting and formatting checks before each commit.

1. Initialize your project (if not already) 

npx create-next-app@latest my-app
cd my-app
Enter fullscreen mode Exit fullscreen mode

2. Install required packages 

npm install --save-dev husky lint-staged prettier eslint
Enter fullscreen mode Exit fullscreen mode

3. Enable Husky 

npx husky install
Enter fullscreen mode Exit fullscreen mode

To make sure Husky sets up every time someone installs your project:

npm pkg set scripts.prepare="husky install"
Enter fullscreen mode Exit fullscreen mode

4. Add a Pre-commit Hook 

npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

This means: Every time you commit, Husky will run lint-staged.

🧹 Add Lint-Staged Config

In your package.json, add:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}
Enter fullscreen mode Exit fullscreen mode

This will:

  • Run eslint --fix on changed JS/TS files
  • Format them using prettier --write

✅ Optional: Add Pre-Push Hook to Run Tests

Want to make sure tests pass before pushing code?

npx husky add .husky/pre-push "npm run test"
Enter fullscreen mode Exit fullscreen mode

Now, every time you push code, tests will run first.

🧪 Example Git Workflow With Husky 

git add .
git commit -m "Add new feature"
# Husky runs:
# → eslint --fix
# → prettier --write
# → If no errors → commit success
# → If errors → commit fails
Enter fullscreen mode Exit fullscreen mode

💡 Why This Helps

  • No more dirty code sneaking into the repo
  • Developers don’t waste time fixing each other’s formatting
  • Consistent style across the whole team
  • Tests catch bugs before code reaches production

🔚 Final Thoughts

Even if you’re working solo, Husky can be a big help. It keeps your codebase clean and reduces bugs.

The best way to learn Husky? Use it! Add it to your Next.js project, start small (linting, formatting), and build up (tests, builds, etc).

Happy coding! 💻🚀

Top comments (0)