Next.js + TypeScript + ESLint + Prettier で開発環境を構築

2023年5月16日未分類

こんにちは。ものレボの古澤です。

本日は、最近話題のNext.jsの環境構築を行なっていきたいと思います。

構築する環境はこちら。

MacOS: 13.3.1 (22E261)
Next.js (version13)
TypeScript
TailwindCSS
ESLint
Prettier

Next.jsのインストール

早速、Next.jsのインストールを実施します。

以下のコマンドを実行して、サクッと自動インストールできます。

% npx create-next-app@latest --ts

実行後、会話形式で設定方法を聞かれるので、以下のように設定
✔ What is your project named? … nextjs-test
✔ Would you like to use ESLint with this project? … No / Yes => ESLint使うのでYes
✔ Would you like to use Tailwind CSS with this project? … No / Yes => Tailwind CSS使うのでYes
✔ Would you like to use `src/` directory with this project? … No / Yes => Yes
✔ Use App Router (recommended)? … No / Yes => recommendされているのでYes
✔ Would you like to customize the default import alias? … No / Yes => 特にカスタマイズの必要がないのでNo

これだけで、必要パッケージのインストールと初期設定を殆どやってくれる。便利！！！

では、起動してみます。

npm run dev

ブラウザで http://localhost:3000 にアクセスすると、以下の画面が起動します。

lintエラーになるファイルを作成して、lintを試してみる。

エラーが出ない。。。

ESLintの設定

インストール直後は、next/core-web-vitalsが設定されている。

next/core-web-vitalsは、以下を包含している。（詳細はこちら）

上記の設定だけではtypescriptのエラーが出力されない。。。

ということで、typescript用のeslint設定をインストールする。

npm install --save-dev @typescript-eslint/eslint-plugin

インストールしたplug-inを有効化する。

{
  "extends": [
    "plugin:@typescript-eslint/recommended",    <====== 追加
    "next/core-web-vitals"
  ]
}

ここで、もう一度、npm run lintを実行。

エラーが表示されるようになりました！！！

一旦、ESLintの設定は完了です。後は自分の好みに応じて設定を追加してください。ESLintの設定は色々あるので、自分好みの設定を探求していくのも面白いと思います。

Prettierの設定

とにかく、まずはインストール

npm install --save-dev prettier

次に設定ファイル(.prettier.json)を準備する

{
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "semi": true,        <== falseを設定することが多いが、バグりやすいので、trueを設定
  "singleQuote": true
}

Google先生に聞けばどこにでもある設定なので、内容の説明は割愛。詳しく知りたい方は、こちらを見てください。

Prettierが整形した箇所に対して、eslintでエラーが出ないようにする。

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

.eslintrc.jsonの設定を追加

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

npmコマンドを追加。


  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --no-cache",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}' && next lint --fix"   <== 追加
  },

npm run format を実行して、フォーマットが実行されることを確認できたら完了です！

おまけ

VSCodeの設定

vscodeにプラグインを入れて、より開発しやすくしましょう。

私は、以下のExtensionsを導入しています。

esbenp.prettier-vscode: Prettier のプラグイン
dbaeumer.vscode-eslint: ESLint のプラグイン

また、ファイルの保存時に、自動でフォーマッタが動作するように、以下の設定を行なっています。

(.vscode/settings.json)
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.organizeImports": true
    },
    "prettier.configPath": ".prettierrc.json",
    "typescript.tsdk": "node_modules/typescript/lib"
}

これで、ファイルを保存したら、自動でフォーマットされるようになります。