概要

Next.jsプロジェクトでは、Git Hooksを使ってコミットやプッシュ時に自動的にコードのチェックや整形を行うことで、コード品質を向上させることができます。特にHuskyやlint-stagedを活用することで、コミット時にESLintやPrettierを自動で実行し、チーム全体で一貫したコードスタイルを保つことができます。本記事では、これらのツールを使って効率的にGit Hooksを設定する方法を解説します。

Git Hooksの基礎とHuskyの活用

Git Hooksは、Gitの操作（コミットやプッシュなど）の前後にスクリプトを実行できる機能です。これにより、コミット前に自動でコードをチェックしたり、フォーマットを適用することが可能です。Huskyを使えば、このGit Hooksを簡単に設定し、チーム全体で同じルールを適用することができます。

Huskyの設定方法

まず、Huskyをインストールし、pre-commitフックを設定します。

npm install husky --save-dev
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npm run lint-staged"

これにより、コミット時に自動でlint-stagedが実行されるようになります。

lint-stagedでコミット前にコードチェックを実行

lint-stagedは、コミットされるファイルに対してのみESLintやPrettierを実行できるツールです。これにより、大規模なプロジェクトでもコミットが高速に行え、不要なファイルまでチェックする無駄が省けます。

lint-stagedの設定

package.jsonに次のように設定を追加します。

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix"
  ],
  "*.{json,css,scss,md}": [
    "prettier --write"
  ]
}

この設定により、コミット前にJSXやTypeScriptファイルのリントチェックが行われ、JSONやCSSファイルが自動でフォーマットされます。

Pre-pushフックでの追加チェック

pre-commitフックに加えて、pre-pushフックを使えば、プッシュ前にさらにテストや追加のリントチェックを行うことができます。これにより、コードをリモートリポジトリにプッシュする前に品質を担保できます。

"husky": {
  "hooks": {
    "pre-push": "npm run test"
  }
}

この設定では、プッシュ前にテストが自動実行され、エラーがあればプッシュが中断されます。

まとめ

Git Hooksを活用したHuskyとlint-stagedの設定は、Next.jsプロジェクトでの開発効率とコード品質を大きく向上させます。コミット時に自動的にコードがチェック・整形されるため、開発者が手動でフォーマットする手間を省き、ミスを未然に防ぎます。プッシュ前のチェックも取り入れることで、さらに信頼性の高いコードベースを維持できるでしょう。