ブログシステムをHonoXに移行しました
個人ブログやってる人なら何度も経験しているだろうブログシステムの移行です。今回はNext.jsからHonoXというフレームワークに乗り換えました。
移行した理由
ブログでは何度か言及してたのですが、ここ最近のNext.jsは段々と多機能化していきフレームワーク自体がFatになって来ている事とそれに伴って追従するための学習コストが上がっている事が気になって来ました。特にNext.jsのApp Routerはここ最近で大きな変化をもたらしたことでNext.js以外のスタックに移行するきっかけになりました。
移行するにあたって
移行する上でなるべくシンプルに保つ事とWeb標準である事を目標としました。個人的に独自ファイル、例えば .vue や .astro など普段の業務では使わないのでメンテンス、アップデートが追従出来る気がしなかったので選択肢としては外しました。
ぼんやりと移行したいなと考えている段階で HonoXについて｜yusukebe この記事が出た事とHonoという日本発のフレームワークがここ最近ノリに乗っているのを感じていたのでHonoXについて調べ始めました。色々と調べていくと、 このサイトをHonoXに書き換えた | blog.berlysia.net この記事を見つけたのとソースコードも公開されていたので、色々と見て参考にしていました。
簡単そうなHonoXから試して無理だったらRemixにするつもりでしたが、少し触った感じ行けそうだったのでそのまま選びました。
ある程度実装の目処がたった所で、react-markdown をやめて remark から自力でレンダリングするようにした話 これを見つけて、今回の移行で remark から自力でレンダリングするようにしました。めちゃくちゃ参考になりました・・・🙏
HonoXでは例の一つとしてmdxを使ったサンプルがありますが、このサイトの場合は;
- Markdown (.md)ファイル
- Markdownファイルを remark に読み込ませて mdast に変換
- mdast をHono/jsxを使ってjsx(tsx)として出力
といった流れです。やっているのはmdxと同じで、frontmatterも記事一覧などで使用していますが自力で出力しています。
苦戦したところ
まだまだHonoXはアルファ版という事とメタフレームワークという、少し趣が異なるものもあり情報がまだまだ少ないです。ドキュメントも十分にカバーされているわけではないので、色々と苦戦しました。
ローカルで立ち上げた時に ‘module is not defined’ エラー
ローカルで開発する際に module is not defined のエラーが出て困ったんですが、どうやら入れているライブラリによるらしく、 vite.config.ts に ssr オプションに使用するライブラリを列挙する必要があるようでした。
こちらはドキュメントでは触れられてなく、issueで発見しました
ライブラリは全てESMに対応してましたがオプションを入れるまで上手く動作しなかったです。
SSGでビルド
元々Next.jsの時もSSGで静的サイトにビルドしてたのですが、HonoXでSSGについて言及されているのはほんの少しでいまいちわからず、ある程度作った段階でテストビルドしてみると全くページが生成されませんでした。結果としてはHonoの https://hono.dev/helpers/ssg#ssgparams に書かれているように、ssgParams をRouterに通すことでビルド時に必要な全パスを渡してあげることが可能です。
分からなかったのですが、ssgParams(async() ⇒ {}) ではどうやら動かず、JSONファイルを生成してそれを読み込む形でパスの生成する事にしました。今後 async/await に対応されるかもしれないですね。
Islandコンポーネント
インタラクティブを可能にするIslandコンポーネント機能が搭載されていて、ドキュメントに書かれているんですが現状いくつかルールがあります。app/router ディレクトリ内で直接コンポーネントを呼ぶ事と export default function でコンポーネントを定義する必要があります。(普通のコンポーネントは export const component = () => {} で書ける)
なので簡単に対応するのはIslandコンポーネントをpropsとして受け取るような形にして、app/router 内で読み込むと動きました。
移行してみて
本当に欲しかったのは、補完が効くJSX(.tsx)が動くファイルベースのルーター付きのフレームワークで、今回HonoXに移行した事により、Reactさえも依存ライブラリから無くなり非常にシンプルで薄いブログシステムになりました。Hono自体がWeb標準に沿っていることもあり、今後もこのままシンプルさをキープされると嬉しいですね！Vercel/Next.jsも企業としてマネタイズしていく必要があるのでユーザーが増えていくように色々していかないといけないのはとてもわかるのですが、個人ユースには今はオーバースペックになってしまったのも事実だと思います。
移行した事によって、Vercelにホスティングする必要も無くなったのでドメインも管理しているCloudflare Pagesに移行しました。どちらもただ静的ファイルをホスティングしているだけだったのでどこでも良かったのですが、逆に今は全てをCloudflareに一元化することになりました。
ブログぐらいの規模だと非常に扱いやすいフレームワークだと思います！このままもっと使う人が増えて欲しいですね！
ブログのGitHubはこちら: https://github.com/Nismit/Nislog
