さいとブログ

Next.js+microCMSでブログをリニューアルした話

Gatsby.js+Netlifyでホスティングしていたブログをこの度、Next.js+microCMSで作り替えました!
ついでにホスティングサービスもNetlify→Vercelに移行してます。

ここら辺のなぜ、リニューアルしたのか?について書いていきます。

また、以前運用していたブログからは、記事をいくつか移行して、いずれ(1年以内に)閉鎖しようと思います。

なぜ、Gatsby.jsとNetlifyをやめたのか?

まず、Netlifyに不満はなくて、リプレースする時の技術選定がNext.jsなので、親和性の高そうなVercelと組み合わせるためにNetlifyをやめることにしました。

次にGatsbyについては、ソースが多く、また理解しづらい構造に感じるようになったためです。
どのファイルを編集すれば、変更できるのかドキュメントも残していない中で理解するのが辛かったです。

上記については、Gatsbyでブログを作ったときにスターターテンプレートを利用して、膨大なテンプレートファイルを初期生成したのと、
自分で追加開発した部分を初期の構造を理解せずにどんどんコードを追加していったためだと考えられます。

後者については、そもそも理解してから変更しろよ・・という反省しました。

また、3年前くらいに作ってから、まともにメンテナンスせず(ライブラリのアップデート等)にいたら、新規で記事書いて、ビルドしての時点でエラーが出て記事書くのが辛くなってきのもやめる要因になりました。(これは作り替えても、自分が継続的にメンテしないとまた起こりそうなので、気をつけます・・)

そこで今からGatsbyの理解深めるなら新しく作り替えてもいいのは??という気持ちになり、見切り発車でリプレースすることにしました。

ここまでで辛かったことを書いてきたので、よかったことも述べておきます。

  • Markdownで記事を書いていため書式をキャッチアップできたこと
  • ドメイン量以外に料金をかけずに済んだこと
  • 継続的なメンテナンスが重要だと再認識できたこと


なぜ、Next.js+microCMS+Vercelなのか?

これらを選定した理由は、3年前と比べてNext.jsがどんどん伸びてきたこと(Gatsbyが霞んできたなと思っている)ともしかしたら仕事で使用する可能性があるため、素振りをしたいと思ったため、Next.jsを採用しました。
今回は、スターターテンプレートを使わずに1から自分でtsやcssを書いて、ライブラリも最小限の導入で済ませております。(これで少しでも運用が楽になるといいな・・)

microCMSについては、SNSで流れてきて知っていたのと、なんかいけてるなと思ったのと、前職の会社ブログでwordpressで記事を書いていたため、CMSのエディターって書きやすいなと感じたので、とりあえず試してみようと思いました。
まだ利用し始めて数日ですが、どこにいても記事にしたいなと思ったことを下書きできるのが前回と比較してメリットに感じます。

Vercelについては、Next.jsと親和性高そうと感じた以上の理由はないです。

今後の展望

開発スタートから約3日で公開まできたので、まだ最低限の機能しかないため、キャッチアップも兼ねて色々と追加していきたいです!
Next.js/microCMS/Vercelについて無知状態からスタートして、3日で形になったので、これらの技術ってすごいなーと感心しました!!

機能については、これらを徐々に追加していきたいなと考えています。

  • カテゴリー一覧ページの実装
  • タグ一覧ページの実装
  • OGPの設定
  • GoogleAnalyticsの導入
  • PWA化(興味本位でやってみたいだけ)


プロフィール

profile icon

saitoです。
ソフトウェアエンジニアとして働いています。
web開発に関する学びを当ブログに書き残しています。