Next.jsの環境構築の手順 #Next.js

Next.js のプロジェクトを作る時に、自分なりに設定しているところをまとめました。

こんな環境を作るよ

TypeScript
Jest
ESLint
Prettier
Sass
stylelint
- アルファベット順に並び替える、properties-alphabetical-order を使用
husky
- pre-commit で lintを回す用にしたい

記載しているうち太字のものは、テンプレートを利用することで、導入はほぼ手間なく行えます。

プロジェクトの作成

Next.js はexamples と呼ばれる、テンプレートのようなものを公式で提供しています。
検討している構成に近いテンプレートを利用することで、環境構築の手順が少なくなるのでこちらの利用が便利です。
with-typescript-eslint-jest という example を使って、プロジェクトを作成します。

npx create-next-app --example with-typescript-eslint-jest プロジェクト名

Sass のインストール

CSS Modules で Sass を使えるようにします。
公式に沿ってインストールすればこちらは完了です。

yarn add sass

stylelint のインストール

必要なパッケージのインストール

yarn add -D stylelint stylelint-config-prettier stylelint-config-recommended-scss stylelint-prettier stylelint-scss stylelint-order npm-run-all

インストールしたプラグインは下記

stylelint
stylelint-prettier
- stylelint 上で Prettier が実行される
stylelint-config-prettier
- Prettier と stylelint の競合するルールを無効化してくれる
stylelint-config-recommended-scss
- 推奨されている SCSS のルール
stylelint-scss
- SCSS 構文に対応する
stylelint-order
- プロパティの並び替えを実現してくれる
npm-run-all
- npm script の並列実行を行えるようにする。ESLint と Stylelint を同時に実行するために入れておく

.stylelintrc

stylelint を実行する際のルールなどを記載します。

.stylelintrc

{
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
  ],
  "extends": [
    "stylelint-prettier/recommended",
    "stylelint-config-recommended-scss"
  ],
  "ignoreFiles": [
    "**/node_modules/**"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["function", "if", "else", "for", "each", "include", "mixin", "content"]
      }
    ],
    "order/properties-alphabetical-order": true,
  }
}

npm script の修正

scripts に下記を記載します。

package.json

{
  "scripts": {
    "lint": "run-p lint:*",
    "lint:css": "stylelint src/styles/**/*.scss",
    "lint:js": "eslint . --ext .ts,.tsx,.js,.jsx",
    "format": "run-p format:*",
    "format:css": "yarn lint:css --fix",
    "format:js": "yarn lint:js --fix",
  }
}

husky@6 のインストール

テンプレートで入っている husky のバージョンが4系なので、6系に上げてしまいましょう

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

$ yarn add -D husky@6.0.0 \
  && yarn husky install \
  && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
$ yarn husky add .husky/pre-commit "yarn lint-staged"

package.json に設定を追加する

指定された拡張子のファイルが commit された時、Prettier の format を実行するようにします。

package.json

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,scss}": [
      "yarn format"
    ]
  }
}

その他

VSCode の設定

拡張機能の、"dbaeumer.vscode-eslint"、"stylelint.vscode-stylelint"をインストールする
ファイルを保存した時に、自動でフォーマットを整えるように settings.jsonを記載する。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": false,
}