Next.js 初期セットアップ

パッケージインストール

devDependenciesにインストールしたいとき

npm install <パッケージ名> --save-dev

dependenciesとdevDependenciesを間違えてしまった時は一度アンインストールしてインストールし直す。

npm uninstall <パッケージ名>

コードのチェックと整形

ESLint

①VSCode拡張機能のESLintをインストール

②.eslintrc.jsonについて
.eslintrcjsonは.eslintrc.jsに変更可能。
基本的なルールが設定されているeslint:recommendedを追記。

.eslintrc.js

module.exports = {
  extends: [
    // ESLintが公式で用意している基本的なルールが記載されているため必要
    "eslint:recommended",
  ],
};

③Next.jsが推奨している設定を追加
"next/core-web-vitals"
https://nextjs.org/docs/pages/building-your-application/configuring/eslint

.eslintrc.js

module.exports = {
  extends: [
      〜
    // Next.jsが推奨している設定
    "next/core-web-vitals",
  ],
};

prettier

①VSCode拡張機能のPrettier - Code formatterをインストール

②prettierのインストール

npm install --save-dev prettier

③eslint-config-prettierのインストール
ESLintとPrittierには被っている設定があるので、ESLintのいくつかの設定をオフにしてPrittierに任せましょうということでeslint-config-prettierを用意してくれている。
https://prettier.io/docs/en/integrating-with-linters

インストールしたらextendsの一番最後にprettierを追記すればOK

.eslintrc.js

module.exports = {
  extends: [
  　〜
    // ESLintにはコードの書式設定ルールも含まれており、競合する可能性があるため必要。
    "prettier",
  ],
};

自動整形

VSCord左下の設定マーク　>　設定　>　ワークスペース　>　右上の矢印がくるっとしたやつでsettings.jsonを開く。
①ESLint側の自動整形としてeditor.codeActionsOnSaveを追記
https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code#step-4-formatting-on-save

②Prettier側の自動整形としてeditor.formatOnSave": trueを追記

③デフォルトのフォーマッターをprittierに設定
"editor.defaultFormatter": "esbenp.prettier-vscode"

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript"],
  "editor.formatOnSave":true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

これでESLintによってエラーを検出されたら自動で修正され、
かつコードのフォーマットとしてPrettierを指定したのでルールに応じて自動修正してくれる。

scriptの設定

npm-run-allをインストールした上でスクリプトの記述を行う。

npm install npm-run-all --save-dev

package.json

    //チェック（npm-run-allのインストール必要）
    //チェックする分には同時に実行して構わないので並列で実行（パラレル）
    "lint": "run-p --continue-on-error lint:*",
    "lint:eslint": "next lint",
    "lint:prettier": "prettier --check .",

    //自動修正
    //ESLintとPrettierの自動修正が同時に行われるとおかしくなるので直立で実行（シリアル）
    "fix": "run-s --continue-on-error fix:eslint fix:prettier",
    "fix:eslint": "next lint --fix",
    "fix:prettier": "prettier --write .",

.prettierignoreの設定

.nextファイルも監視対象になっているので、.prettierignoreファイルを作成し、.nextと記述すると対象外にしてくれる。

huskyやlintstageの使いどき

チーム開発をするならhuskyやlintstageの導入は必要。なぜなら全員がESLintの設定がちゃんとできているとも限らないし、全員がVSCodeを使用しているとも限らないから。
だからコミットされる前に必ずESLintを通さないといけないhusky等を使用するとチームでコードの綺麗さを保つことができる。

tailwindcss

簡単にイイ感じのスタイルを適用できるtailwindTYPOGRAPHY

スタイルを自動で付与してくれるパッケージ。
https://zenn.dev/datchlive/articles/50e556d27d68b4

順番を自動で入れ替えてくれるprettier-plugin-tailwindcss

https://github.com/tailwindlabs/prettier-plugin-tailwindcss
①インストール

npm install -D prettier prettier-plugin-tailwindcss

②.prettierrc.jsを作成し、設定を記述

.prettierrc.js

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};