Next.jsの環境設定

2021-11-28

Next.js でプロジェクトを作るときに、自分が最初に設定することを書いていこうと思います。

前提条件は以下のとおりです。

  • Next.js
  • TypeScript
  • CSS Modules
  • npm

src フォルダーを作成する

Next.js を初期状態で使用する場合、トップディレクトリに大量のファイルとフォルダーを作成することになってしまいます。

そうすると保守性が下がるため src フォルダーを作成し、その下で作業するほうが無難です。

src Directory

tsconfig.json に baseUrl を設定する

たまーに baseUrl を設定していないプロジェクトを見かけますが、設定しないメリットがないので設定します。

Path aliases and baseUrl

src フォルダーを作成した場合は、src を設定します。

これで絶対パスによるインポートが可能となるため、保守性が上がります。

.editorconfig を作成する

エディターごとの差異を埋めるため .editorconfig を作成します。

.npmrc を作成する

npm パッケージをインストールする際、勝手にバージョンの固定を行ってほしいので .npmrc を作成します。

yarn の場合は .yarnrc となります。

sass をインストールする

CSS Modules を使用する場合、Sass を使わない理由がほぼないので導入します。

Sass Support

リセット系の CSS をインストールする

リセット系の CSS は導入するようにしましょう。

自分はいつも ress を使います。

linter および formatter を導入する

  • ESLint
  • Stylelint
  • commitlint

あたりは導入して損はないと思います。

husky を導入する

コミット前に linter と formatter を実行したいので huskylint-staged を導入します。

余談ですが、husky は v7 になって使いやすさがぐっと上がって良い感じです。


その他にも StoryBook や Jest、React Testing Liblary や Cypress なども場合によって導入したほうが良いと思います。

© 2018 kk-web