ブログをhexoからnext.jsに移行した話

May 8th 2022

表題の通りブログの技術スタックをHexoからNext.jsに移行しました。 移行の背景としては、主に2点:

  1. 記事も含めてすべてgitで管理するのが煩雑だった。
  2. Hexoはなんとなくテンプレートをいじっているだけ感が強くて、エンジニアリングしている感が薄く、勉強ついでにやるにはちょっとだけ物足りなかった。

で、それらの不満点を解消する目的で導入したのがNext.js。 さくっと調べた感じで、なんとなくGatsbyかNext.jsが流行りっぽかったので、どちらかにしようかまで決めて、あとはGatsbyがテーマやプライグインなどちょっとHexoに近い感覚のフレームワークだったので、どちらかというと自由度が高くて勉強になりそうな、Next.jsにしました。

JSはあまり経験値が高くなく、特にフロントエンドはまるっきし初心者だったこともあり、まずは書籍で文法やらNext.js特有の機能の勉強をしました。

参考書として以下の本を購入しました。 JSの基本文法を知っている程度で読み始めましたが、比較的すんなり読み終えられました。Next.jsに絞ると選択肢はあまり多くないですが、読みやすくて良かったです。

https://www.amazon.co.jp/React-js-Next-js超入門-掌田津耶乃-ebook/dp/B07X7DHZ9F 書籍の知識だけではなかなかいきなりブログを作るのは難しかったので、ブログの記事として実際にNext.js + Contentfulな組み合わせでブログを作った記事を参考にブログを作ってみました。 実際に参考にしたのは以下の記事です。とてもわかりやすく、どこを自分向けに変更すれば良いかが記載されていたので、とても作り易かった。

https://satoruakiyama.com/blog/building-blog-with-nextjs-and-contentful-ja

私はこの記事のブログをベースに若干のレイアウト変更とページネーションの追加などを行いました。

まだまだ手を加えたいところはたくさんあるのですが、とりあえず見れるレベルにはなっていると思っているので、現時点で一旦移行完了としてブログを公開しています。

これからちまちまと自分好みに変えられたらと思います。とは言え、まだNext.jsおよびReact.jsを理解しきれていないところもあるので、そちらも平行して取り組んでいこうかと思います。