Development Workflow with Husky for Next.js, ESLint, and Vitest Integration

Read the Previous Post: Building the Best Next.js TypeScript ESLint Configuration

GitHub Repository

Implementing a robust pre-commit system can significantly reduce pull request review time. By enforcing ESLint rules, ensuring passing tests, and maintaining a stable build, developers can avoid pushing broken builds and the subsequent need for corrective commits.

This approach improves code quality while reducing CI/CD expenses.

Setting Up Pre-commit and Pre-push

Start by installing the required dependencies:

npm install --save-dev husky lint-staged
# or
yarn add husky lint-staged --dev

To organize Husky within a config folder, modify your package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest",
    "pre-commit": "lint-staged && vitest run",
    "pre-push": "eslint . --fix --max-warnings=0 && npm run build",
    "prepare": "husky install config/.husky"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  }
}

This establishes commands for pre-commit and pre-push operations. Customize according to your project requirements.

Description of Actions

The pre-commit script executes linting with fixes and runs tests before allowing commits:

"pre-commit": "lint-staged && vitest run"

The pre-push script enforces strict linting standards and triggers the build process:

"pre-push": "eslint . --fix --max-warnings=0 && npm run build"

Execute the prepare command to generate the hook files:

npm run prepare
# or
yarn run prepare

This generates the necessary files in the config/.husky directory. These files allow Husky to execute the specified commands whenever a commit or push is made.

If you ever need to bypass Husky’s verification — for example during a work in progress — you can use --no-verify:

git commit . -m 'quick fix' --no-verify

Bypassing verification risks overlooking console errors and is not recommended as a regular practice.

Conclusions

• Husky pre-commit and pre-push hooks improve code stability through enforced linting and testing protocols.
• Organizing configurations within a dedicated config folder maintains project cleanliness and simplifies maintenance.
• Early error detection reduces corrective commits and workflow disruptions.
• While bypass options exist, circumventing verification processes compromises code reliability.
• Integrating Husky fosters quality-focused development practices and a culture of continuous improvement.

Next Post: Storybook in Action with Next.js, Tailwind and TypeScript