Next.js 開発環境構築メモ 2023年9月版 - npm, TypeScript, ESLint, Prettier, VSCode

create-next-app

https://nextjs.org/docs/getting-started/installation

これのとおりに実行する。

npx create-next-app@latest

設定はすべてデフォルト。
エイリアスを使いたい場合は、最後の設定だけを Yes にする。

What is your project named? my-app
Would you like to use TypeScript? No / _Yes_
Would you like to use ESLint? No / _Yes_
Would you like to use Tailwind CSS? No / _Yes_
Would you like to use `src/` directory? No / _Yes_
Would you like to use App Router? (recommended) No / _Yes_
Would you like to customize the default import alias? _No_ / Yes

ESLint & Prettier

npm install -D prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

create-next-app で入る eslint と eslint-config-next も devDependencies に移動したほうが良い気がするので後で調べる。

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

---

2021 年版

https://zenn.dev/15/articles/aa8c322c85d27f