⚡

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

2021/07/18に公開

Next.js

追記： 2023 年版を書きました

まえがき

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

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

create-next-app

ts版で実行する。

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

yarn を使う

rm package-lock.json
yarn install

好みで pages を src にまとめる

ディレクトリ構成は Next.js 13 の Experimental な機能で変わりつつあるので、まとめようか迷っているのなら、とりあえずデフォルトで良いと思う。

mkdir src && mv pages src

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

ESLint & Prettier

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

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

.eslintrc.json

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

.prettierrc

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

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
  }
}