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

kimizuy

はじめに

こんにちは。kimizuy です。

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

導入方法

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

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

yarn add -D husky lint-staged

husky を初期化します。

npx husky-init && yarn

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

npm testyarn 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 はどんどん新しい機能が追加されて便利になっていきますね。

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

kimizuy

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。