Next.js + TypeScriptの環境構築

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

1-1. プロジェクトフォルダの作成

Create Next App (create-next-app) というツールを利用して、Nextのプロジェクトを自動生成します。
--tsまたは--typescriptオプションを付けることでTypeScriptを利用することができます。

$ npx create-next-app {プロジェクト名} --ts

1-2. アプリケーションの立ち上げ

作成したプロジェクトフォルダに移動し、アプリケーションを立ち上げます。

$ cd {プロジェクト名}
$ npm run dev #開発用サーバーの起動

1-3. 各ファイル・ディレクトリの役割

• フォルダ類

  • .next
    ビルドした際のデフォルトの出力先ディレクトリ。
    プロジェクト作成時にはなく、実行すると生成されます。
  • node_modules
    インストールした各種パッケージのインストール先ディレクトリ。
  • pages
    表示するWebページの内容がまとめられています。
    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の静的解析ツールで、構文の誤りを検出します。

2-1. 準備

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

$ 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を以下のように編集。

.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ファイルのみ適用する。

package.json

"scripts": {
  "lint": "eslint --ext .ts,.tsx src",
  "lint:fix": "eslint --ext .ts,.tsx src --fix",
}

以下のコマンドを実行

$ yarn lint

3. Prettierの設定

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

3-1. 準備

Prettier関連の必要なパッケージをインストールします。

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

• prettier
  Prettier本体

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

3-2. .prettierrc.jsonの作成

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

.prettierrc.json

{
  "tabWidth": 2, // タブをスペースに変換する際のスペース文字数
  "trailingComma": "es5", // 配列やオブジェクトの末尾の要素もしくはプロパティ値にカンマを付加するか
  "semi": false, // ステートメントの末尾にセミコロンをつけるか
  "singleQuote": true, // 文字列をシングルクォートで囲うか
}

Prettierで設定可能なオプションについては、公式ドキュメントを参照してください。

3-3. Prettierの実行

package.jsonのscriptsに以下を追加。

package.json

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

以下のコマンドを実行

$ yarn format