💡

Next.jsプロジェクトにCIを実装したので備忘録

2025/06/06に公開

Next.jsプロジェクトにCIを実装したので備忘録

Next.jsプロジェクトでCI/CDの勉強としてCIを導入してみました。
実装した内容としては、コードがコミットされたら、TypeScriptの型チェックに加え、Pritterで整形、Lintチェックした後に自動で再コミットしてくれます。
特にprettierでtailwind-cssのクラスの整形も行ってくれて感動しました。
私は既に作成したアプリケーションに導入したのですが、次は最初から導入しようと思います。
今回は簡単なフォーマットやTailwindcssの整形、TypeScriptの型チェックを行い、整形したコードをmainに再コミットしてくれるCIの実装を行ったので備忘録として残します。

🎯 この記事でできること

ESLintでコードの品質チェック
TypeScriptの型チェック
Prettierでコードフォーマットチェック
Tailwindcssの整形
Mainブランチに整形したものコミット

📁 1. GitHub Actionsの設定

まず、プロジェクトのルートに以下のファイルを作成します。

mkdir -p .github/workflows && touch .github/workflows/ci.yml

`以下内容をci.ymlに記述：

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  lint-and-format:
    runs-on: ubuntu-latest
    # PRに適切な権限を付与(自動でmainに再コミットする場合には権限を与えないとエラーが出ます。)
    permissions:
      contents: write
      pull-requests: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint check
        run: npm run lint

      - name: Type check
        run: npx tsc --noEmit

      - name: Prettier format
        run: npx prettier --write "src/**/*.{ts,tsx,js,jsx}"

      - name: Commit and push changes(権限を使用して自動コミット)
        uses: stefanzweifel/git-auto-commit-action@v5

これだけで基本的なCIが完成！

🎨 2. Prettierの設定

パッケージのインストール

npm install --save-dev prettier eslint-config-prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

eslint-config-prettier←eslintとの競合を抑えるため
参考：

prettier-plugin-tailwindcss ←Tailwindcssのフォーマットするプラグイン
参考：

@ianvs/prettier-plugin-sort-imports←インポート文を自動的にソートするプラグイン
参考：

設定ファイル作成

.prettierrc を作成：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss", "@ianvs/prettier-plugin-sort-imports"]  //←使用したいプラグインはこの項目を追加：
}

除外ファイル設定

.prettierignore を作成：

# Build output
.next
out
dist
build

# Dependencies
node_modules

# Misc
.DS_Store
.env*
!.env.example

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Cache
.cache

🔧 3. ESLintの設定

今回はNext.js作成時に作成されるものeslint.config.mjsに修正

意図としてはlintとprettierで競合が起きることがある。
あらかじめ用意された以下の設定を使用して、競合するルールや不要なルールを簡単にオフにすることができます。

 {
  "extends": [
    "some-other-config-you-use",
    "prettier" //これを追加
  ]
}

📝 4. package.jsonにスクリプト追加

便利なスクリプトを追加しておきましょう：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\"",
    "type-check": "tsc --noEmit"
  }
}

これで以下のコマンドが使えるようになります：

# コードフォーマット実行(修正込み)
npm run format

# フォーマットチェック(エラー文での警告)
npm run format:check

# 型チェック
npm run type-check

✅ 完成！

これで以下のチェックが自動実行されるようになりました：

ESLint: コードの品質チェック
TypeScript: 型エラーの検出
Prettier: コードフォーマットの統一
Build: ビルドエラーの早期発見

💡 まとめ

今回はコードの整形をメインにCIを実装しました。
次はテストコードを書いて、CIに含めようと考えています。

Next.jsプロジェクトにCIを実装したので備忘録

🎯 この記事でできること

📁 1. GitHub Actionsの設定

🎨 2. Prettierの設定

パッケージのインストール

設定ファイル作成

除外ファイル設定

🔧 3. ESLintの設定

📝 4. package.jsonにスクリプト追加

✅ 完成！

💡 まとめ

Discussion