デプロイに毎回こけるのでhuskyとlint-stagedを導入した #Next.js

最近、WordPressをヘッドレスCMS化してNext.jsでWebサイトを構築しました。ホスティングにはNetlifyを使っています。
実際に構築したサイトがこちらです。
青年海外協力隊でアフリカに行ったときからの友達で彼が個人事業主→法人になるタイミングでサイトリニューアルの依頼を受けて構築させていただきました。
（写真・映像の事業を行なっていて、彼の作品は大好きです）

話がそれちゃいましたが、サイト構築時に、悩んでいたことがあります。
それは、Netlifyでデプロイするときコケることがありました。

12:11:26 AM: Failed to compile.
12:11:26 AM: ./app/layout.tsx
12:11:26 AM: 1:1  Error: Run autofix to sort these imports!  simple-import-sort/imports

原因としては、ローカル環境でlintのエラーを解消し忘れていたのです。
エンジニアは怠惰であるべきなのに、僕はなぜ毎回こんなことを手動でやっていたのだろう...。

この問題を解消してくれたのがhusky、lint-stagedになります。

huskyができること

commitやpushのタイミングで自動でスクリプトを走らせることができます。今回の僕の問題でいうと、lintが通っていないにも関わらずpushしてしまい、Netlifyでデプロイされる状態になっていました。
lintが通っていないcommitすることができなくなります。

Next.jsの開発環境にhuskyを導入してみる

導入の前に基本の理解をしておきます。

💡Husky
Gitフックで任意のプログラムを実行するライブラリ

💡Gitフック
Gitの特定のコマンドの実行前後にスクリプトを実行する仕組み

💡lint-staged
Gitで変更されたファイルにのみlintやformatをするためのライブラリ

それでは導入方法についてです。

husky&lint-stagedの導入

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

$ npm install --save-dev husky lint-staged // huskyとlint-stagedの導入

ドキュメントに沿って下記のコマンドを実行します。

$ npx husky init

.husky/ディレクトリにpre-commitスクリプトが作成され、package.jsonのprepareスクリプトが更新されます。
package.jsonに追加されます。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "prepare": "husky"
},

またルート直下に.huskyファイルが生成されているかと思います。

rootディレクトリ

.husky
├ _
│ ├ pre-commit
│ ├ pre-push
│ └ etc...
└ pre-commit

.husky/pre-commitファイルを編集します。

pre-commit

- npm test
+ npx lint-staged

これでインストールは完了しました。

lint-stagedの設定

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "fix:lint": "eslint --fix",
    "prepare": "husky"
  },
+ "lint-staged": {
+   "*.{ts,tsx}": "npm run fix:lint"
+ }
}

あとは、プロジェクトの.eslintrc.jsonやeslint.config.jsのルールに沿って自動で修正されるようになります。

まとめ

これで品質を保ったコードのみ（lintを通ったコード）がPRできるようになりました。
開発を始める前にこのあたりを整えておくべきだったなと勉強になりました。