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

Manish Karmakar — Sun, 07 Dec 2025 17:35:30 +0000

Introduction

Most JavaScript/TypeScript projects use ESLint + Prettier for linting and formatting.
But by 2024–2025, many teams switched to Biome — a fast, all-in-one Rust-powered tool that 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 config.

Why Biome?

1. Fast

Rust-based engine → extremely fast formatting and linting.

2. All-in-One

Linting
Formatting
Auto-fixes
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`

This step is extremely important and completes the Husky setup.

Add or update your scripts section in package.json:

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

What these scripts do:

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

Why `--write`?

Biome removed --apply —
--write is now the correct flag to apply fixes.

This formats + lints only your staged files before committing.

Step 5 — Test the Setup

Try writing messy code:

const  a={b:1}

Then:

git add .
git commit -m "test"

Biome auto-fixes 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 this section as a ready-to-copy reference.

1. `package.json` Scripts

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

2. `.husky/pre-commit`

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

3. `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

DEV Community: Manish Karmakar