Zenn
⛳

Next.jsの初期設定を整理する

2022/07/17に公開
Next.js
React
tech

Next.js をインストールし、いざ開発となっても、開発環境周りの設定が必ずつきまといます。

そこで今回は、Next.js での開発を進めるにあたり基本である初期設定について整理します。

主に、Prettier や ESLint などのコード整形周りがメインとなります。

※利用は TypeScript 前提とします。

Next.js のインストール

まずは Next.js を TypeScript の設定でインストールします。

今回は、npm 系ではなく yarn 系で進めていくこととします。

yarn create next-app --typescript

create-next-app を実行することで eslint と eslint-config-next が install されます。

Next10 以前は ESLint を install する必要があったのですが、Next11 以降は Next に最適化された設定で ESLint が使用できます。

以下コマンドで静的解析し、動作確認を行うことができます。

yarn lint

ディレクトリ構成の変更

初期インストール時、pages ディレクトリの中に各種コーディング内容を実装していきます。

アトミックデザインのデザインパターンを利用するとなった場合、components ディレクトリが必要です。

そのディレクトリはプロジェクト直下で管理することとなります。

しかし開発の都合上、src ディレクトリの中で管理するのが良いので、src ディレクトリの中に入れ込むこととします。

改善前のディレクトリ構成。

.
├── pages
│   ├── api
│   │   └── hello.ts
│   ├── _app.tsx
│   └── index.tsx

改善後のディレクトリ構成。

.
├── src
│   ├── pages
│   │   ├── api
│   │   │   └── hello.ts
│   │   ├── _app.tsx
│   │   └── index.tsx
│   └── components
│       ├── atoms
│       │   └── button.tsx
│       └── organisms

alias の設定

tsx ファイル内で、別ファイルのモジュールのインポート時、相対パスで遡るのはディレクトリが異なるとしんどい面も多いです。

パスエイリアスを利用すると、遡らずにファイル指定ができるようになるので、設定しておきます。

tsconfig.json の compilerOptions に下記を追加します。

"baseUrl": "./",
"paths": {
    "@/*": ["./src/*"]
}

こうすることで、src ディレクトリ以下のファイルについては、@/~で指定することが可能となります。

Prettier の設定

Prettier をインストールします。

インストール時、prettier が整形したコードに対して ESLint がエラーを出力しないようにするプラグインであるeslint-config-prettierもインストールします。

yarn add -D prettier eslint-config-prettier

Prettier の整形ルール設定

Prettier のコードフォーマットルールを設定する為、package.json と同じ階層に .prettierrc.json を新規作成します。

{
  "printWidth": 120,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "endOfLine": "lf"
}

Prettier option 設定のデフォルト値の参考を記載します。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto"
}

ESLint と Prettier の設定

両パッケージを同時に利用すると、設定周りでバッティングする可能性があります。

以下のように.eslintrc.jsonに対して記述することで、ESLint と Prettier のコード整形がバッティングしないようになります。

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

ESLint の設定

create-next-app の時点で ESLint の設定がされているのですが、個人的にカスタマイズしたい場合、.eslintrc.json を編集することで対応可能です。

ESLint の対象範囲を変更する

ESLint の対象範囲を src ディレクトリに限定することで適切に解析することが可能となります。

package.json の lint コマンドに --dir src を追記します。

"scripts": {
    ...
    "lint": "next lint --dir src",
    "lint:fix": "yarn lint --fix",
    ...
},

ESLint はあくまでコードの静的解析ツールです。コードチェックしてルールに外れるコードに対してエラーを表示しますが、そのエラーを修正することはありません。

そのため、yarn lint:fixのコマンドを利用することで、修正もしていくれるようになります。

ESLint だけ導入し、整形も可能なので、Prettier は必要なんですか。

という意見もありそうですが、餅は餅屋という諺がある通り、整形は Prettier に任せましょう。

Prettier の整形実行設定

package.jsonに下記コマンドを追加します。

"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"

つまり、整形実行時には下記ファイルは除外されます。

  • .gitignore
  • ~.js
  • ~.jsx
  • ~.ts
  • ~.tsx
  • ~.json

VSCode での保存時に実行したいので、下記 json ファイルを.vscode/ディレクトリ内に追加します。

{
  // formatter
  "editor.formatOnSave": true, // ファイル保存時の自動フォーマット有効
  "editor.formatOnPaste": true, // ペーストした文字の自動フォーマット有効
  "editor.formatOnType": true, // 文字入力行の自動フォーマット有効
  "editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトフォーマッターをPrettierに指定
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // ファイル保存時に ESLint でフォーマット
  }
}

これによって保存時に整形してくれるようになります。

リポジトリの準備

Next.js を始める際、ESLint と Prettier の設定は不可避なのでデファクトスタンダードとして、リポジトリを用意しておくのも良いです。

下記に準備して利用することにしました。

https://github.com/Naoki0722/nextjs-templete

まとめ

いかがでしょうか。

最初の設定ほど面倒なものはないので、テンプレ化しておくと便利になります。

GitHubで編集を提案

Discussion