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
を自動生成してくれる。
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
を設定する。
{
"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"
}
}
これで完了。
各ファイルの型の付け方は公式ドキュメント https://nextjs.org/docs/basic-features/typescript を参照すると良い。