next lint を lint-stagedと組み合わせるやり方

概要

lint-staged で next lint を実行するように設定した時に詰まったのでメモしておきます。
以下のように対象のファイルに next lint を実行するように設定していたのですが、これだとエラーがでて上手く動作しませんでした。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "prepare": "husky install",
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": "npm run lint"
}

error - Failed to load env from .env.production.local Error: ENOTDIR: not a directory, ...

やり方

公式によるとどうやら .lintstagedrc.js に以下を追加する必要があるようでした。

const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
  // 他に実行したいコマンドをここに書く
}

こちらのファイルを追加してもエラーが発生する場合は、 package.json に lint-staged の設定が残っていないか確認してください

参考

Basic Features: ESLint | Next.js
https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files

@next/env @next/lint breaks when ran via lint-staged · Issue #33096 · vercel/next.js
https://github.com/vercel/next.js/issues/33096