🌟
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
オプションがあるそうなので、そちらを使うとよいかもしれません。
Discussion