このブログはこれまでGatsby.js + TypeScriptで作っていたんですが(参照)、最近仕事でNext.js＋SSGを使う機会があったので、これを気にGatsby.jsからNext.jsにリプレースすることにしました。

Next.jsに切り替えるにあたり、ServiceとPresentationのレイヤーを意識して、Contentful関連のロジックはserviceディレクトリに、UI周りのコンポーネントやHooksはpresentationディレクトリに設置するディレクトリ構成を採用し、PresentationとServiceの依存を極力最小限にするように意識して開発を進めました。そのおかげで、実装したUIコンポーネントは疎結合を保つことができ、かなりクリーンな構成を保つことができたと思っています。

CSSはCSS Modulesではなく、Sass Modulesを試してみました。個人的にはCSS in JSよりCSS Module派です。最初はSassを使わず、ただのCSS Modulesで実装をしていたのですが、CSS Modulesはメディアクエリで使うで使う条件の値といった値を変数で扱えず、また、Next.jsではPostCSSのVariableの利用は推奨していないとのことなので、今回はSassを導入することとしました。久々にSassを使ったのですが、便利ですね。特にmixinは、下記のようなメディアクエリのシンタックスシュガーをmixinで作っておくと便利です！

@mixin withPC() {
  @media screen and (min-width: $viewPortSize) {
    @content;
  }
}

UIコンポーネントの実装では、Storybookを導入してコンポーネント駆動開発を実践してみることにしました。コンポーネント駆動開発はページから独立した環境下でコンポーネントを実装していくことができるので再利用しやすいコンポーネントが作れる気がしました。また、今回は試していないんですが、Storybookはテストとの親和性も高いみたいなので実際のプロダクトに試しに入れてみるのも良いかなとか思ったりしました。コンポーネント駆動開発は、Storybookのチュートリアルでハンズオン的に試してみることができるので、一度やってみると良いと思います。

※Avatarのサンプル画像はWaifu Labsで生成したものを利用しています。