Next.jsの初期設定を整理する
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 の設定は不可避なのでデファクトスタンダードとして、リポジトリを用意しておくのも良いです。
下記に準備して利用することにしました。
まとめ
いかがでしょうか。
最初の設定ほど面倒なものはないので、テンプレ化しておくと便利になります。
Discussion