こんにちは、iimonで、サーバーサイドエンジニアをしている腰丸です。本記事はiimonアドベントカレンダー4日目の記事となります。

はじめに

普段は、サーバーサイドの開発をメインに行っており、フロントエンドについての知見は少ないのですが、 Nextを学習する際に、この設定を入れておくと楽に開発できると思ったものについて記述します。

Lint設定

メンバーのLint設定が揃っていないと、見通しが悪いのとLinterが気付いてくれるような些細なミスで、レビューに時間が取られてしまうのはもったいないので、ある程度は開発前のコードベースの段階で設定が必要だと思います。以下、一例です。

ESLint

Nextに限らず、js(ts)の開発ではもはや必須の設定ですね。
Nextの場合は、コードベースを作る際に、

Would you like to use ESLint? No / Yes

という選択肢がでてくるので、「Yes」を選択して、必要に応じて付け足していけば良さそうです。

Prettier

公式: Configuring: ESLint | Next.js
ドキュメントの通りですが、

1 Prettierをインストール

npm install --save-dev eslint-config-prettier

2 eslintrc.jsonへの設定の追加(公式のドキュメントは、"next/core-web-vitals"ではなく、"next"になっていますが、特に困ることがなければ、"next/core-web-vitals"を使っておけばよさそうです)

{
  "extends": [
    "next/core-web-vitals",
    "prettier"
  ]
}

3 ルートディレクトリに、prettier.jsonを作成(一例)

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

VsCodeの設定(エディタの設定）

開発効率に関わってくるので、共通化できる設定は、Git管理してプロジェクトで合わせておきたい派です。(VsCodeを前提にしていますが、あえてVsCode以外のエディタやIDEを使っている方は、自分で似たような設定をしている方が多いと思います)
VsCodeの設定ファイルは、./vscode配下のファイルで共有できるので、以下に設定の一例を記述します。

プラグインの設定

プラグインは、各自で好きなものを使えば良いと思いますが、eslint,prettierだけは必須だと思っているので設定で共有してしまいます。他のプラグインについては、プロジェクト毎にこれは共通で入れておきたいというものがあれば、追記していっても良いと思います。

.vscode/extensions.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

    // List of extensions which should be recommended for users of this workspace.
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
    ],
    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
    "unwantedRecommendations": [
        
    ]
}

ファイル保存時のコード整形の設定

list-stagedを使ってcommit時に整形する方法もありますが、コーディング途中のファイルにも整形が走ったほうが、書いている途中で見やすいので、設定しておきます。(以下一例)

.vscode/settings.json

{
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true
    },
    "editor.formatOnSave": false,
    "typescript.enablePromptUseWorkspaceTsdk": true,

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
      "editor.formatOnSave": true
    },
    "[javascriptreact]": {
      "editor.formatOnSave": true
    },
    "[json]": {
      "editor.formatOnSave": true
    },
    "[typescript]": {
      "editor.formatOnSave": true
    },
    "[typescriptreact]": {
      "editor.formatOnSave": true
    }
}

デバッグ設定

公式: Configuring: Debugging | Next.js

こちらもドキュメントの通りです。ブレークポイントでデバッグするだけで、圧倒的に効率があがるはずです。個人的に必須の設定なので、こちらも設定ファイルで共有してしまいます。(Next.js: debug full stackの設定だけしておけば良いと思います）

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Next.js: debug full stack",
        "type": "node-terminal",
        "request": "launch",
        "command": "npm run dev",
        "serverReadyAction": {
          "pattern": "- Local:.+(https?://.+)",
          "uriFormat": "%s",
          "action": "debugWithChrome"
        }
      }
    ]
}

「Shift + ⌘ + D」を押して、出てくる画面の「▷」のボタンを押すとデバッグ起動ができます。

まとめ

以上、簡単ですが、Nextで開発するときに最初に入れておきたい設定を書いておきました。
今回は、開発環境の設定についてのみ記述しましたが、「CSSライブラリの選定」、「データフェッチ方法」、「エラーハンドリング」、「デザインパターン」、「認証情報の扱い」など、他にも予め決めてから開発したいことが多く、フロントエンドの開発も面白そうだなと感じました。