Next.js アプリに husky と lint-staged を導入する方法（と next lint について）

はじめに

こんにちは。kimizuy です。

最近 Next.js アプリに husky と lint-staged を導入する機会があったのでご紹介します。

導入方法

以下の手順で導入していきます。

まず、パッケージをインストールします。

yarn add -D husky lint-staged

husky を初期化します。

npx husky-init && yarn

.husky/pre-commit が自動で追加されているので、そのファイルを以下のように書き換えます。

（npm test を yarn lint-staged に書き換えました）

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

package.json に次の設定を追加します。今回、linter には eslint を使います。

{
  ...

  "lint-staged": {
    "*.{js,jsx}": "eslint --fix"
  }
}

以上、導入方法でした。

おまけ: eslint の代わりに最近、追加された next lint を使いたい場合

next lint は Next.js のビルトインされている eslint です。ほぼ設定不要で使えて、基本的なルールを備えています。

以下のように使います。

yarn lint

しかし、現時点（v11.1.2）ではファイル単体の検査には使えないため lint-staged と組み合わせて使うことができません（すべてのファイルを対象にしてしまう）。

そこについ先日、ファイル単体の検査を可能にするオプション --file が、v11.1.3-canary.9 で追加されました（PR）。次の v11.1.3 で使えるようになるはずです。

もうすぐリリースされそうですが、一足先に使いたい人のために example を作りました。

次のリポジトリ（nextjs-husky-lint-staged）をクローンして動作を確かめてみてください。動作の確認方法は README に書いています。

さいごに

本記事では、Next.js アプリに husky + lint-staged を導入する方法と next lint の動向についてご紹介しました。

Next.js はどんどん新しい機能が追加されて便利になっていきますね。

これからも楽しくキャッチアップしていきましょう。