Closed19

【備忘録】Next 14 のセットアップ

Tatsu24Tatsu24

Next の初期設定をざっくり備忘録的にまとめておく。
2023/12/02 時点のものです。

Tatsu24Tatsu24

node version の指定をする。
私は nodenv を使っているので .node-version ファイルを作成すればOK。
以下サイトの stable になっているバージョンで問題ないと思う。
https://nodejs.org/en

nodenv local 20.10.0
Tatsu24Tatsu24

パッケージマネージャーの設定をする。
好きなのを使えばいいと思うが今回は pnpm を使う。
https://pnpm.io/ja/installation

// npm でインストールした時出来るファイルを削除
rm -rf node_modules
rm package-lock.json

pnpm install

pnpm-lock.yaml ができたら成功。

Tatsu24Tatsu24

ついでにバージョン指定もしておく。
これで pnpm バージョン8 以外でインストールしようとするとエラーが出るはず。

.npmrc（プロジェクトの root に作成）
engine-strict=true
package.json
// 中略
  "engines": {
    "pnpm": ">=8",
    "npm": "please_use_pnpm_instead",
    "yarn": "please_use_pnpm_instead"
  },
Tatsu24Tatsu24

create-next-app でインストールされたライブラリが package.json でメジャーバージョンしか指定されていない物があった。前までそうだったっけな。。
pnpm 使っているので以下コマンドですべてアップデートしておく。

pnpm update
Tatsu24Tatsu24

lefthook の設定をする。
これは git フックを管理するライブラリである。
今回はプロジェクトにインストールする。

pnpm add -D lefthook
pnpm lefthook install
Tatsu24Tatsu24

個人的にはプレフィックスがちゃんとついて入れば後はそんなにこだわり無いので commitlint.config.js は以下のようにルールを設定しておく。

commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [0, 'always'], // subject のルールを無効化
    'header-max-length': [2, 'always', 999] // メッセージヘッダーの文字制限を 999 文字に
  }
};
Tatsu24Tatsu24

lefthook.yml で commitlint が動くように設定する。

lefthook.yml
commit-msg:
  commands:
    commitlint:
      run: pnpm commitlint -e

静的解析も入れるが一旦設定しないでおく。

Tatsu24Tatsu24

eslint と prettier の設定。
後から eslint のルールを追加するのはつらいのでできるだけこのタイミングで入れたいルールは入れておく。

Tatsu24Tatsu24

ちなみに自分の設定したもの

pnpm add -D eslint-config-prettier eslint-plugin-import eslint-plugin-unused-imports eslint-plugin-jest eslint-plugin-jest-dom eslint-plugin-testing-library eslint-plugin-storybook @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
Tatsu24Tatsu24
.eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:storybook/recommended"
  ],
  "plugins": ["import", "unused-imports", "jest", "jest-dom", "storybook", "testing-library"],
  "rules": {
    "no-console": [
      "warn",
      {
        "allow": ["warn", "info", "error"]
      }
    ],
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling", "index"],
          "object",
          "type"
        ],
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "internal"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "alphabetize": {
          "order": "asc"
        },
        "newlines-between": "always"
      }
    ],
    "import/first": "error",
    "import/newline-after-import": "error",
    "unused-imports/no-unused-imports": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "no-unused-vars": "off",
    "jest/consistent-test-it": ["warn", { "fn": "test" }],
    "jest/require-top-level-describe": ["warn"]
  }
}
Tatsu24Tatsu24
.prettierrc
{
  "trailingComma": "none",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 100
}
Tatsu24Tatsu24

next.config.js と package.json の scripts の設定をする。
typedRoutes を使いたいので追加。

next.config.js
// 一部略
const nextConfig = {
  experimental: {
    typedRoutes: true
  }
};

scripts は以下のように設定した。

pnpm add -D npm-run-all
package.json
// scripts のみ抜粋
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "check": "run-p check:*",
    "check:lint": "next lint",
    "check:tsc": "tsc --noEmit",
    "format": "pnpm check:lint --fix"
  },
Tatsu24Tatsu24

ここで lefthook の更新をしておく。
pre-commit 時に 静的解析 するように設定する。
pre-push は以前設定していたが最近は CI で確認するし、なくてもいいかも？という気持ちなので設定しない。

lefthook.yml
+ pre-commit:
+   parallel: true
+   commands:
+     check:
+       run: pnpm check && pnpm format && git add {staged_files}

commit-msg:
  commands:
    commitlint:
      run: pnpm commitlint -e
Tatsu24Tatsu24

CI を設定する。
これは環境によりまちまちと思うが参考までに設定したものを貼っておく。

.github/actions/setup-node-and-pnpm
name: Setup Node.js and pnpm
description: Setup Node.js and pnpm Action

runs:
  using: composite
  steps:
    - name: Install Node.js
      uses: actions/setup-node@v4
      with:
        node-version-file: ./.node-version

    - uses: pnpm/action-setup@v2
      name: Install pnpm
      with:
        version: 8
        run_install: false

    - name: Get pnpm store directory
      shell: bash
      run: |
        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

    - uses: actions/cache@v3
      name: Setup pnpm cache
      with:
        path: ${{ env.STORE_PATH }}
        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
        restore-keys: |
          ${{ runner.os }}-pnpm-store-

    - name: Install dependencies
      shell: bash
      run: pnpm install
.github/workflows/run.yml
name: CI
on: [workflow_dispatch, pull_request]
jobs:
  check-static:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js and pnpm
        uses: ./.github/actions/setup-node-and-pnpm
      - name: Run Check Static
        run: pnpm check
  # テストが追加されたら以下のコメントアウトを外す
  # unit-test:
  #   runs-on: ubuntu-latest
  #   steps:
  #     - uses: actions/checkout@v4
  #     - name: Setup Node.js and pnpm
  #       uses: ./.github/actions/setup-node-and-pnpm
  #     - name: Run Unit Test
  #       run: pnpm test
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js and pnpm
        uses: ./.github/actions/setup-node-and-pnpm
      - name: Run Build
        run: pnpm build

参考↓
https://github.com/pnpm/action-setup

Tatsu24Tatsu24

最後、デフォルトで設定されているページは消しておく。
これで大体設定はできた。

このスクラップは2023/12/19にクローズされました