Next.js + TypeScriptの環境構築

## 1. Next.jsのプロジェクトの作成

#### 1-1. プロジェクトフォルダの作成
Create Next App (create-next-app) というツールを利用して、Nextのプロジェクトを自動生成します。
`--ts`または`--typescript`オプションを付けることでTypeScriptを利用することができます。
```Bash
$ npx create-next-app {プロジェクト名} --ts
```

#### 1-2. アプリケーションの立ち上げ
作成したプロジェクトフォルダに移動し、アプリケーションを立ち上げます。
```Bash
$ cd {プロジェクト名}
$ npm run dev #開発用サーバーの起動
```

#### 1-3. 各ファイル・ディレクトリの役割
- フォルダ類
  - **.next**
  ビルドした際のデフォルトの出力先ディレクトリ。<br>プロジェクト作成時にはなく、実行すると生成されます。
  - **node_modules**
  インストールした各種パッケージのインストール先ディレクトリ。
  - **pages**
  表示するWebページの内容がまとめられています。<br>apiフォルダ内のファイルはpageの代わりにAPIのエンドポイントとして扱われます。
  - **public**
  公開されるリソース類(イメージファイルなど直接アクセスできるもの)がまとめられています。
  - **styles**
  スタイルシートファイルがまとめられています。

- ファイル類
  - **.eslintrc.json**
  ESLintに関する設定ファイル
  - **.gitignore**
  Gitで扱われる特殊なファイル
  - **next-env.d.ts**
  Next.jsに関する型定義ファイル
  - **next.config.js**
  Next.jsに関する設定ファイル
  - **package.json**
  プロジェクトの設定ファイル
  - **README.md**
  READMEファイル
  - **tsconfig.json**
  TypeScriptに関する設定ファイル
  - **yarn.lock**
  パッケージのバージョンを固定するためのファイル

## 2. ESLintの設定
ESLintはJavaScriptの静的解析ツールで、構文の誤りを検出します。

https://eslint.org/

#### 2-1. 準備
ESLint関連の必要なパッケージをインストールします。
Next.jsではバージョン11からESLintがデフォルトで搭載されているため、eslint本体をインストールする必要はありません。

```Bash
$ yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks
```

- `@typescript-eslint/parser`
TypeScriptをESLintが理解できるようにパース(プログラムで扱えるようなデータ構造の集合体に変換)する
- `@typesctipt-eslint/eslintplugin`
ESLintのTypeScript用プラグイン(ESLintの追加ルールをまとめたnpmパッケージ)
- `eslint-plugin-react`
ESLintのReact用のプラグイン
- `eslint-plugin-react-hooks`
ESLintのReactフック用のプラグイン

#### 2-2. .eslintrc.jsonの編集
ルートディレクトリの.eslintrc.jsonを以下のように編集。
```js:.eslintrc.json
{
  // JavaScriptの実行環境を指定
  "env": {
    "browser": true,
    "es2021": true
  },

  // 構文解析に使用するパーサーの指定
  // デフォルトではES5しかパースできない
  "parser": "@typescript-eslint/parser",

  // parserのオプションを設定
  // JSXやECMAScriptのバージョンの設定など
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },

  // 任意のルール実行時に適用される追加の共有設定
  "settings": {
    "react": {
      "version": "detect"
    }
  },

  // 追加ルールの指定
  // pluginsにルールを指定しても、ルールは適用されていない状態
  // 追加ルールを適用する場合は、extendsかrulesで設定が必要
  "plugins": ["react", "react-hooks", "@typescript-eslint"],

  // 共有設定の適用
  // 各pluginで公開されている設定ファイルを指定することで、ルールの設定を適用
  // ルール設定が重複する場合は、後から指定したものが適用される
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
  ],

  // 個別のルール設定
  // extendsで指定した共有設定以外の個別設定
  // 0:無効, 1:警告, 2: エラー
  "rules": {
    "react/props-types": 0,
    "react/react-in-jsx-scope": 0
  }
}

```

#### 2-3. ESLintの実行
package.jsonのscriptsに以下を追加。
srcディレクトリ直下の.ts, .tsxファイルのみ適用する。
```js:package.json
"scripts": {
  "lint": "eslint --ext .ts,.tsx src",
  "lint:fix": "eslint --ext .ts,.tsx src --fix",
}
```
以下のコマンドを実行

```bash
$ yarn lint
```



## 3. Prettierの設定
Pretiierはソースコードをの整形ツールで、プロジェクトのルールに従って自動的にコードを整形します。
ESLintはコードの正しさを保つのに対し、Prettierはコードの読みやすさを保つツール。

https://prettier.io/

#### 3-1. 準備
Prettier関連の必要なパッケージをインストールします。

```bash
$ yarn add --dev prettier eslint-config-prettier
```

- `prettier`
Prettier本体

- `eslint-config-prettier`
ESLintとPrettierを併用する際に使用
ESLintのコーディングスタイル関連のルールを無効にし、ESLintとPrettierの衝突を回避する

#### 3-2. .prettierrc.jsonの作成
ルートディレクトリに.prettierrc.jsを作成し、以下のように編集。

```js:.prettierrc.json
{
  "tabWidth": 2, // タブをスペースに変換する際のスペース文字数
  "trailingComma": "es5", // 配列やオブジェクトの末尾の要素もしくはプロパティ値にカンマを付加するか
  "semi": false, // ステートメントの末尾にセミコロンをつけるか
  "singleQuote": true, // 文字列をシングルクォートで囲うか
}
```
Prettierで設定可能なオプションについては、[公式ドキュメント](https://prettier.io/docs/en/options.html)を参照してください。

#### 3-3. Prettierの実行
package.jsonのscriptsに以下を追加。
```js:package.json
"scripts": {
  // --write: フォーマット整形
  // --ignore-path .gitignore: .gitignore に含まれているファイルはコード整形の対象外
  // 対象ファイルの拡張子を指定
  "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
}
```
以下のコマンドを実行

```bash
$ yarn format
```