How to Set Up Husky + Biome in a Next.js Project (2026 Guide)

Published: (December 7, 2025 at 12:35 PM EST)
3 min read
Source: Dev.to

Source: Dev.to

Introduction

Most JavaScript/TypeScript projects use ESLint + Prettier for linting and formatting.
Biome – a fast, all‑in‑one Rust‑powered tool – replaces both. Pairing Biome with Husky ensures that every commit meets your formatting and linting standards automatically.

This guide shows the cleanest way to set up Husky + Biome in a Next.js project using npm, without lint-staged and without any legacy ESLint/Prettier configuration.

Why Biome?

  1. Fast – Rust‑based engine → extremely fast formatting and linting.
  2. All‑in‑One – Handles linting, formatting, auto‑fixes, and import organization.
  3. Simple – Single configuration file: biome.json.
  4. No lint-staged required – Biome supports staged‑only checking natively.

Step 1 — Install Husky & Biome

npm install -D @biomejs/biome husky

Step 2 — Initialize Husky

npx husky init

This creates:

.husky/
  pre-commit

Step 3 — Add a Biome Configuration

Create a file named biome.json:

{
  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Step 3.5 — Add Husky & Biome Scripts in package.json

Update the scripts section:

{
  "scripts": {
    "prepare": "husky",
    "lint": "biome check .",
    "format": "biome format --write ."
  }
}
  • prepare → installs Husky Git hooks automatically.
  • lint → runs a full Biome check.
  • format → formats the entire project.

Step 4 — Configure the Pre‑Commit Hook

Replace .husky/pre-commit with:

#!/bin/sh
npx biome check --staged --write

Note: Biome removed the --apply flag; --write is now the correct flag to apply fixes. This command formats + lints only your staged files before committing.

Step 5 — Test the Setup

  1. Write messy code, e.g.:

    const  a={b:1}
  2. Stage and commit:

    git add .
    git commit -m "test"

Biome will auto‑fix it to:

const a = { b: 1 };

If the commit succeeds, everything works.

Step 6 — (Optional) Remove ESLint & Prettier

If you’re fully switching to Biome, delete:

  • .eslintrc.*
  • .prettierrc
  • All ESLint packages
  • All Prettier packages

Biome replaces them completely.

Final Snippets

Use these as a ready‑to‑copy reference.

package.json Scripts

{
  "scripts": {
    "prepare": "husky",
    "lint": "biome check .",
    "format": "biome format --write ."
  }
}

.husky/pre-commit

#!/bin/sh
npx biome check --staged --write

biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Conclusion

Using Biome + Husky is the cleanest way to maintain code quality in 2026:

  • Faster than ESLint/Prettier
  • Fewer dependencies
  • Modern Git‑hook workflow
  • Automatic staged‑only checks
  • Simple configuration

Perfect for Next.js, React, TypeScript, and Node projects.

Back to Blog

Related posts

Read more »