DEV Community

Manish Karmakar
Manish Karmakar

Posted on

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

#husky #biome #precommit #nextjs

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
Enter fullscreen mode Exit fullscreen mode

Step 2 — Initialize Husky 

npx husky init
Enter fullscreen mode Exit fullscreen mode

This creates:

.husky/
  pre-commit
Enter fullscreen mode Exit fullscreen mode

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"
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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 ."
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

Then:

git add .
git commit -m "test"
Enter fullscreen mode Exit fullscreen mode

Biome auto-fixes it to:

const a = { b: 1 };
Enter fullscreen mode Exit fullscreen mode

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 ."
  }
}
Enter fullscreen mode Exit fullscreen mode

2. .husky/pre-commit 

#!/bin/sh
npx biome check --staged --write
Enter fullscreen mode Exit fullscreen mode

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"
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)