とりあえずNext.jsを試してみたかったことから作ったブログですが、色々と問題点があり、にっちもさっちも行かなかったので、改めてブログを作り直しました。

抱えていた問題点

CSSまわりの問題

TailwindCSSを入れつつ、Chakra UIも使っていたので、必要以上に複雑な状態になっていたのが一番の問題で、なおかつClient Componentとして使ってしまっていたのであんまりNext.jsである意味がないかもな・・・という状態になっていました。

Contentfulのモデル周りの問題

Next.js Starter with Contentfulベースでやってみたものの、運用してみると、どうせ書くのは僕一人なのに著者の設定があることや、アイキャッチ画像の設定があることがストレスになってしまっていたので、書き直しのついでに最低限の要素だけに絞りました。

やったこと

CSS Modulesへの書き直し

何らかの手法に統一した方が良さそうだなと今回の失敗で強く感じたので、CSSやUIまわりは再検討を行いました。

強いこだわりはないのですが、もともと空で書けるほどCSSは強くなくて、調べながら書くくらいのレベル感なので、Tailwind CSSだと「うーん、○○を使おう」→「CSSだとどうするんだっけ」→「Tailwind CSSだとどうするんだっけ」と変換コストがかかってしまうのと、どうも修練が足りないのかクラスが増えていくのがあんまり合わなかったので、とりあえず今回はやめときました。

CSS-in-JSはServer Componentsではサポートしていないそうなので対象外として、じゃあCSS Modulesか、と思い、今回はCSS Modulesで書くことにしました。

個人的には、ファイル増えるのもこの規模感であれば全然しんどくないな〜という感じです。

補助的にshadcn/ui使ってみるのも面白そうかなと思ったのですが、Tailwind CSSベースということでまた別の機会に使うことにしました。

画像周りの修正

Contentfulのモデルの項目を一部削除しつつ、アイキャッチ画像の排除をしたり、簡素なデザインに変えたりもしていきました。

あと、基本Server Componentでやりたかったので、Client側でごにょごにょするような機能は一旦消しました。

使ってなかった機能の削除

レシピ記録とか作ってたんですが、まぁ更新面倒なので消しました。

あと、お遊び半分・転職時のネタ半分でプロフィールサイトを別個に作ったので、Steamまわりはそっちに移してもいいかなと思いブログからは消しました。

旧ブログからの切り替えリリース

これは以下の手順で実施しました。

• Contentful側で旧本番環境をコピーしたステージング環境を作成
  • 作成したステージング環境でモデルの項目を消したり、不要な記事の削除を行ったりを実施
• ステージング環境にローカルから繋いで、型ファイルの生成
• Contentful側でステージング環境をコピーした本番V2環境を作成
• APIトークンに本番V2環境のアクセス権限を付与
• Vercel側で新ブログのビルド
• 仮ドメインでの疎通確認後、Vercel側でドメインの付け替え
• Vercel、Contentfulの旧本番環境の削除

ドメインの付け替えで多少ダウンタイムはあったかもですが、おそらく影響なく切り替えられたんじゃないかなと思います。

切り替え完了して思ったこと

CSSまわりはちゃんとしようと思いましたね・・・。

あと、用途次第ではあると思うのですが、Next.jsである必要性は一度立ち止まって考えた方が良さそうだなぁと実感しました。