Zenn
🙄

Next.js 14でのBiomeとLefthookの導入方法

2024/10/25に公開
Next.js
Biome
tech

はじめに

Web開発でのコード品質管理やフォーマットは重要です。Next.js 14プロジェクトに、コードのフォーマットと自動Lintを行うBiomeと、Gitフックでこれらの操作を効率化するLefthookを導入し、開発環境を効率化する手順を詳しく解説します。

BiomeとLefthookとは？

  • Biome: JavaScriptやTypeScriptのコードをフォーマット、整理、Lintするツールです。軽量で高速に動作し、コードの一貫性を保ちます。
  • Lefthook: Gitフックを通じて自動でLintやFormatを実行し、手動のコードチェックを減らし開発者の負担を軽減します。

Next.jsプロジェクトの作成

まず、Next.js 14プロジェクトを以下のコマンドで作成します。

npx create-next-app@14.2.16 --ts sample-app && cd sample-app && npm i next@14.2.16 && code .

Biomeの導入

次に、Biomeを開発用依存としてインストールします。

npm install --save-dev --save-exact @biomejs/biome

Biomeの初期化

インストールが完了したら、以下のコマンドでBiomeを初期化します。

npx @biomejs/biome init

biome.jsonの設定

生成されたbiome.jsonファイルを以下のように編集します。インデント幅やクオートスタイルなど、フォーマッタやリンターの詳細を設定可能です。

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "extends": [],
  "files": { "ignoreUnknown": true },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "ignore": [".next", "node_modules", "public"],
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": true,
    "ignore": [".next", "node_modules", "public"],
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 80
  },
  "javascript": {
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    },
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "single",
      "semicolons": "always",
      "arrowParentheses": "asNeeded"
    }
  },
  "json": {
    "parser": { "allowComments": true },
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 80
    }
  }
}

VSCode用の設定

BiomeのVSCode拡張機能をインストールし、保存時に自動フォーマットが動作するように設定します。

VSCodeのsettings.json設定

Biomeを既定のフォーマッタとして設定し、自動フォーマットを有効化します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

.vscode/extensions.jsonの設定

この設定により、チームメンバーがBiomeの拡張機能を推奨として表示されるようになります。

{
  "recommendations": ["biomejs.biome"]
}

ESLintの削除手順（ESLint導入済みの場合）

  1. プロジェクトルートにある.eslintrc.jsonまたは.eslintrc.jsファイルを削除します。

  2. package.json内の以下のESLint関連の依存関係を削除します。

    "eslint": "^8",
"eslint-config-next": "14.2.16",

  3. 依存関係を削除した後、再インストールします。

    npm install

  4. VSCodeなどのエディタで、既定のフォーマッタをBiomeに切り替えます。

これで、ESLintの影響がなくなり、Biomeによるコードチェックとフォーマットが有効になります。

Lefthookの導入

次に、Lefthookを導入してGitフックでコードの自動チェックを設定します。

npm install lefthook --save-dev

Lefthookの設定ファイル生成

以下のコマンドでLefthookを初期化し、.lefthook.yml設定ファイルを生成します。

npx lefthook install

.lefthook.ymlの設定

以下の設定を.lefthook.ymlに追加し、コミット前にBiomeを使用してLintとFormatを自動実行します。

pre-push:
  commands:
    packages-audit:
      tags: frontend security
      run: npm audit

pre-commit:
  parallel: true
  commands:
    biome:
      glob: "src/**/*.{js,ts,jsx,tsx}"
      run: npx @biomejs/biome check --write {staged_files}

package.jsonにコマンド追加

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "biome lint --apply ./src/**/*", 追加
    "format": "biome format ./src/**/* --write", 追加
    "check": "biome check --apply ./src/**/*" 追加
  },

まとめ

以上の手順で、Next.js 14プロジェクトにおいて、BiomeとLefthookを使用した自動化環境の構築が完了しました。

Discussion