【最小構成】Next.jsでhuskyを使用しeslintにエラーがない時のみコミット可能に設定する

2023-04-032024-04-05

はじめに

環境

・node -v：v20.12.1
・yarn -v：1.22.19

手順

create-next-appでプロジェクトを作成する

yarn create next-app --typescript my-app

上記のコマンドでプロジェクトを作成しましょう。
いろいろ聞かれますが、下記のように回答します。

eslintの設定

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
+    "lint:fix": "next lint --fix",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.4"
  }
}

これで「yarn lint:fix」でeslintにエラーがあれば自動で修正が可能になりました

{
  "extends": "next/core-web-vitals",
+  "rules": {
+    "quotes": ["error", "single"]
+  }
}

「これでシングルクオートではなくダブルクオートを使用していたらエラー」というルールが追加されました。

huskyの設定

huskyと必要なライブラリのインストール

yarn add -D husky lint-staged

上記のコマンドでhuskyと必要なライブラリのインストールを行います。

huskyの初期設定

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint:fix": "next lint --fix",
    "lint": "next lint"
  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
  "dependencies": {
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "typescript": "^5"
  }
}

ルート直下にある「/package.json」を上記のように修正します。

npx husky-init

以上のコマンドを叩いてください。huskyの環境が構築されます。

「/.husky/pre-commit」が自動で生成されるので以下のように修正します。

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

- npm test
+ yarn lint-staged

huskyをNext.jsのlinterへ対応させる

ルート直下へ「.lintstagedrc.js」というファイルを作成し以下のように記述してください。
これはNext.jsでのみ必要な設定です。

const path = require('path')

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

module.exports = {
    '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}