Zenn
Open4

Next.js Pages Router 環境構築（2024年10月版）

siakassiakas

Next.js を Pages Router でインストール

パッケージマネージャは pnpm を採用。pnpm を使って Next.js をインストール。

  • Pages Router を使う
  • ESLint は使わない
pnpm create next-app

✔ What is your project named? … 任意の名前
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias (@/*)? … No
siakassiakas

.node-version, .editorconfig 追加

nodenv を利用しているので、利用中の Node バージョンに合わせて .node-version ファイルを作成する。

node -v
v20.17.0

nodenv local 20.17.0

.editorconfig も追加。

.editorconfig
# http://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

[*.{md,markdown}]
trim_trailing_whitespace = false
siakassiakas

Biome のインストールとセットアップ

インストール。

pnpm add --save-dev --save-exact @biomejs/biome

セットアップ。

pnpm biome init

以下の通り、 biome.json の設定をする。ESLint と併用想定。

  • Format は Biome で実行
  • organizeImports も Biome で処理したいので有効化
  • Lint は ESLint と併用する想定で、Biome 側の設定は推奨設定のみ
    • 以後、Biome 側で off にしておく設定があればつど追加
biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": ["public", "node_modules", ".next", ".astro"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "json": {
    "parser": {
      "allowComments": true,
      "allowTrailingCommas": true
    }
  }
}
siakassiakas

プロジェクト向けの VS Code 設定を追加

プロジェクトルートに .vscode/settings.json と .vscode/extensions.json を追加。

settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports": "explicit",
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}
extensions.json
{
  "recommendations": ["dbaeumer.vscode-eslint", "biomejs.biome"]
}