Next.jsでプロジェクト作成&初期設定を備忘も兼ねて_その2

前回はcreate-next-appを使用してプロジェクトを作成して、そのプロジェクトをgitへpushしてソース管理をするところまでやりました。

そんなに分けても分かりづらくなると思うので、今回は実際のアプリ開発の前の設定まで一気にやっていきます。（開発をしていると絶対に都度なにかしら設定し忘れが出てきますのでその辺りは悪しからずw）

プラグインをインストール

• ESLint

• Prettier

• Sass

とりあえず上の3つをインストールします。

ESLint

記述したコードを設定した内容のよってエラーを発見してくれます。どこでバグが発生したのかを迷うことなく発見できるのでとても便利です。vscodeなどのプラグインを入れておけばyarnやnpmなどで実行しなくてもエラーを表示してくれるので入れるのをお勧めします。

ESLint - Visual Studio Marketplace

ESLintを使用するのに以下のパッケージをインストールして、typescript・reactで使用できるようにします。

yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

設定はいろいろあるのでgoogle先生に聞いてみてください。私が最初に設定したものを載せておきますので参考まで。

// .eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["warn"],
    "no-use-before-define": "off",
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

Prettier

設定した内容に沿って書いたコードを自動で整形してくれます。色々な場所で記述がバラバラにならず統一されたコードにすることができます。チームで開発するときには更に力を発揮します。

vscodeなどエディターに入れておくとファイル保存時に整形してくれる機能もあるのでぜひ使用してみてください。

Prettier - Code formatter - Visual Studio Marketplace

yarn add --dev prettier eslint-config-prettier

設定ファイルは一例なので必要なものを追加、削除してください。

Options · Prettier

// package.json に追加
"prettier": {
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80
}

Sass

cssを拡張してscssで記述したいので入れておきます。react内ではあまり使いませんが、グローバルなものを定義する場合に使用します。

yarn add -D sass

BaseUrlをsrc直下に変更する

これは完全に好みの問題だと思いますが、僕は開発データはsrcフォルダを作って全てそこに入れるようにしています。初期設定ではpagesやstylesがroot直下にあるのでそれを変更します。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "src"
  }
}

// 階層
root
  ├ public
  ├ src
　　　　│　　　　├ pages
  │  ├ components
  │  └ ...etc
　　　　└　設定ファイルなど

初期のスタイルをリセットする

ブラウザごとに初期のスタイリングがあり、リセットせずにコードを書いていくと見た目が変わってしまうことがある。なので最初に全てのスタイリングをリセットしておきます。

【2022年版】おすすめのリセットCSSまとめ！基本知識と使い方を解説 | Web Design Trends

2023年、現在の環境に適したリセットCSSのまとめ

reset.scssなどのファイルを作成してpages/_app.tsxで読み込みます。

// pages/_app.tsx
import '../styles/reset.scss';

完了

これで初期設定は一旦完了です。create next appで作成したプロジェクトは動くはずです。もちろんバージョンや用途によって追加、削除しなくてはならないものもあるので適宜変更してください。

最後に設定ファイルを全て載せておきます。

// package.json
{
  "name": "reversi",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.39",
    "@typescript-eslint/eslint-plugin": "^5.12.1",
    "@typescript-eslint/parser": "^5.12.1",
    "eslint": "^8.10.0",
    "eslint-config-next": "12.1.0",
    "eslint-config-prettier": "^8.4.0",
    "eslint-plugin-react": "^7.29.1",
    "prettier": "^2.5.1",
    "sass": "^1.49.9",
    "typescript": "^4.5.5"
  },
  "prettier": {
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "printWidth": 80
  }
}

// next.config.js（初期から変更なし）
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["warn"],
    "no-use-before-define": "off",
    "import/order": [
      "warn",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}