Use Biome in a Next.js project — one fast Rust-based tool for formatting and linting. Install, biome.json, the check command, format-on-save, ignoring .next, CI, and the Next.js-specific trade-off versus eslint-config-next.
Why: like the others it is a dev dependency. Pin the exact version (--save-exact) so every machine and CI run formats identically — a newer Biome could format slightly differently and create noisy diffs.
$ pnpm add -D --save-exact @biomejs/biomeWhy: the init command writes a biome.json with sensible defaults already turned on — formatter, linter, and import organizing. This one file is your whole setup.
$ pnpm exec biome initit creates biome.json:
{
"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
"formatter": { "enabled": true },
"linter": {
"enabled": true,
"rules": { "recommended": true }
}
}Note: the same handful of choices you set in Prettier live here instead, under "formatter" and "javascript". Linter rules are grouped by category (style, suspicious, correctness) and set to off, warn, or error. The settings below match the Prettier choices from the other lesson, so your Next.js code looks identical either way.
{
"formatter": {
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded",
"trailingCommas": "all"
}
},
"linter": {
"rules": {
"recommended": true,
"suspicious": { "noConsole": "warn" },
"style": { "useConst": "error" }
}
}
}Why: day to day you mostly run one command — check — which lints, formats, and sorts imports together. Add --write to actually fix and rewrite files; without it, Biome only reports (what you want in CI).
$ pnpm exec biome check .$ pnpm exec biome check --write .$ pnpm exec biome format --write .$ pnpm exec biome lint .Why: wrap the commands in package.json so they are easy to run and consistent across the team and CI. Note: run with pnpm check, or npm run check.
$ pnpm check{
"scripts": {
"check": "biome check .",
"check:fix": "biome check --write .",
"format": "biome format --write ."
}
}Where: install the official Biome extension, then set it as the default formatter in .vscode/settings.json. Save the file and Biome formats, fixes, and sorts imports at once. Commit this file so the whole team gets it.
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}Note: tell Biome what to skip directly in biome.json under "files.includes" — a list where a leading ! excludes a path. Skip the Next.js build folder and the generated types file so Biome only touches your own code. No separate ignore file needed.
{
"files": {
"includes": ["**", "!.next", "!out", "!build", "!next-env.d.ts"]
}
}Why: in CI run "ci" (no --write) so it fails the build on any problem without touching files. If you are switching an existing Next.js project, Biome can read your old ESLint and Prettier settings and translate them — though it cannot bring over the @next/next rules, since Biome has no equivalent.
$ pnpm exec biome ci .$ pnpm exec biome migrate eslint --write$ pnpm exec biome migrate prettier --write