Next.js 開発環境構築メモ 2021年7月版 - Yarn, TypeScript, ESLint, Prettier, VSCode

1 min read

まえがき

このあたりを参考に環境構築をしたが、そのままでは動かない or 好みに変えたい部分があったので自分の手順を作ってみた。

詳しい手順の理解が必要であればリンク先を参照してほしい。

https://zenn.dev/66ed3gs/articles/99aa613a86f21f

https://zenn.dev/januswel/articles/402774d76424e71ac906

create-next-app

ts版で実行する。

npx create-next-app --ts sample-app
cd sample-app

yarnを使う

rm package-lock.json
yarn install

srcにまとめる

mkdir src && mv pages src

_app.tsxindex.tsx の相対パスが壊れるので ../../../ に書き換える。

ESLint & Prettier

yarn add -D @typescript-eslint/eslint-plugin eslint-config-prettier

@typescript-eslint/parser は他のですでに入っていたので省略したけれども、それで良いかどうかわからない。

.eslintrc.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

VSCode

.vscode/extensions.json

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}