Next.jsの環境設定
2021-11-28
Next.js でプロジェクトを作るときに、自分が最初に設定することを書いていこうと思います。
前提条件は以下のとおりです。
- Next.js
- TypeScript
- CSS Modules
- npm
src フォルダーを作成する
Next.js を初期状態で使用する場合、トップディレクトリに大量のファイルとフォルダーを作成することになってしまいます。
そうすると保守性が下がるため src フォルダーを作成し、その下で作業するほうが無難です。
tsconfig.json に baseUrl を設定する
たまーに baseUrl を設定していないプロジェクトを見かけますが、設定しないメリットがないので設定します。
src フォルダーを作成した場合は、src を設定します。
これで絶対パスによるインポートが可能となるため、保守性が上がります。
.editorconfig を作成する
エディターごとの差異を埋めるため .editorconfig を作成します。
.npmrc を作成する
npm パッケージをインストールする際、勝手にバージョンの固定を行ってほしいので .npmrc を作成します。
yarn の場合は .yarnrc となります。
sass をインストールする
CSS Modules を使用する場合、Sass を使わない理由がほぼないので導入します。
リセット系の CSS をインストールする
リセット系の CSS は導入するようにしましょう。
自分はいつも ress を使います。
linter および formatter を導入する
- ESLint
- Stylelint
- commitlint
あたりは導入して損はないと思います。
husky を導入する
コミット前に linter と formatter を実行したいので husky と lint-staged を導入します。
余談ですが、husky は v7 になって使いやすさがぐっと上がって良い感じです。
その他にも StoryBook や Jest、React Testing Liblary や Cypress なども場合によって導入したほうが良いと思います。