Next.js のプロジェクトに TypeScript + ESLint + Prettier を追加するメモ

npx create-next-app [app name]

でプロジェクトを作成する。
プロジェクトのルートディレクトリに移動。自動生成された .js ファイルの拡張子をよしなに .ts や .tsx に変えつつ、

yarn add --dev typescript @types/react @types/node

を入力。これで yarn dev すると tsconfig.json を自動生成してくれる。
自動作成された tsconfig.json は "strict": false になっていることに注意。

次に ESLint と Prettier を入れる。

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

お好みのルールの .eslintrc.json と .prettierrc.json を設定する。

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

.prettierrc.json

{
  "singleQuote": true,
  "jsxBracketSameLine": true
}

これで完了。

各ファイルの型の付け方は公式ドキュメント https://nextjs.org/docs/basic-features/typescript を参照すると良い。

---

2021.8.18 追記

今は create-next-app に --ts オプションがあるそうなので、そちらを使うとよいかもしれません。

https://twitter.com/catnose99/status/1426772089789292544