Zenn
🦝

Next.js (with TypeScript) の最小限の開発環境を作る

2024/08/16に公開
Next.js
yarn
ESLint
Prettier
tech

Yarn v4対応で少しつまづいたのと、久々にゼロから環境構築したので作業メモ。

node & yarnの準備

scoop install volta
volta install node@22
volta install yarn@4

Next.jsのセットアップ

yarn create next-app --ts --tailwind --eslint --app --src-dir --use-yarn --import-alias "@/*" --turbopack
cd 指定したプロジェクト名

VSCodeのセットアップ

後段の設定のために先にPrettierをインストール。

yarn add -D prettier eslint-config-prettier

以下の拡張をインストール。

YarnのPlug'n'Playに対応するために拡張の追加や設定を行う。

  1. ZipFSをインストール
  2. yarn dlxコマンドでVSCode, prettier, eslintの設定を行う
    yarn dlx @yarnpkg/sdks vscode
  3. tsxファイルを開き、以下の許可が求められたらAllowを選択する

Preferences: Open User Settings (JSON) から設定を追加する

settings.json
// prettier
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"prettier.configPath": ".prettierrc.json",
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
// eslint
"eslint.useESLintClass": true,
// tailwind
"files.associations": {
    "*.css": "tailwindcss"
},

Prettier

code .prettierrc.json
.prettierrc.json
{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

ESLint

Flat Configに移行しようかと思ったが、Next.jsはまだ非対応で対応を待った方がよさそう。レガシーなやり方で設定する。

code .eslintrc.json

.eslintrc.jsonにルールを追加。

.eslintrc.json
{
  "extends": ["next/core-web-vitals", "eslint-config-prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off" // jsxでReactのimportがなくてもよい
  }
}

Discussion