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

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

.github/workflows/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 prettier-plugin-tailwindcss eslint-config-prettier

設定ファイル作成

.prettierrc を作成：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

Tailwind CSS使用時は prettier.config.mjs を作成し以下の内容を記述：

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
const config = {
    plugins: ["prettier-plugin-tailwindcss"],
  };
  
  export default config;

除外ファイル設定

.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から特に修正していません。必要であればカスタマイズしてください。

📝 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に含めようと考えています。