Husky + Prettier + lint-staged Setup for Next.js

Three tools, each with a distinct job. Together they form an automatic quality gate that runs on every commit:

• Prettier formats your code automatically. You set the rules once — line length, single vs double quotes, trailing commas — and it handles the rest.
• lint-staged runs linters only on the files you've staged for a commit, not your entire codebase. This keeps the pre-commit check fast even on large projects.
• Husky connects everything to Git. It installs scripts that run automatically at key moments — in this setup, immediately before a commit is finalized.

From your Next.js project root, install the three dev dependencies. Next.js already ships with ESLint configured, so you don't need to install that separately.

npm install --save-dev prettier husky lint-staged

Create a .prettierrc file in your project root. These are sensible defaults for a Next.js TypeScript project — adjust them to your team's preference:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}

This is where most guides go wrong. Husky v9 dropped the old .huskyrc file format. Run one command to initialize it:

npx husky init

Open .husky/pre-commit — it was just created by husky init. Replace its contents with a single line that triggers lint-staged:

npx lint-staged

Add a lint-staged key to your package.json. This tells it which tools to run on which file types when they're staged:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

Stage a file with a formatting issue and try to commit. lint-staged will run both tools automatically:

• If Prettier can fix the issue automatically, it will do so and the commit will succeed.
• If ESLint flags something it can't auto-fix (like an unused variable), it will print the error and block the commit.
• Try it both ways — this is the fastest way to understand exactly what the setup catches.

git add .
git commit -m "test commit"

These are the four most common problems developers hit after setting this up:

• Hooks not running after cloning. Someone ran npm install --ignore-scripts, which skips the prepare script. Fix: run npm run prepare manually once.
• `husky: command not found`. An old .huskyrc or husky.config.js from a previous attempt is still present. Delete it and re-run npx husky init.
• `lint-staged` runs on all files, not just staged ones. The .husky/pre-commit file contains prettier --write . instead of npx lint-staged. Replace it with npx lint-staged.
• TypeScript errors not being caught. This is expected — lint-staged runs tools on individual files in isolation. TypeScript's type checker needs the full project to work. Add tsc --noEmit to a pre-push hook instead.