この記事は Hono Advent Calendar 2023 の 24日目の記事です。
https://qiita.com/advent-calendar/2023/hono

このたびこの日記サイトをHono製に置き換えることができました。

これまではNext.jsとmicroCMSでJamstack構成で運営をしていました。静的ファイルをデプロイ時に生成するので、表示はかなり爆速で気に入ってはいました。しかし、バージョン14が出たくらいから技術のキャッチアップが難しくなったな、という感覚がありました。

試しにバージョンアップをしてみたのですが、色んな箇所で不具合を起こしていて、どこを直せばいいのかが分からない。

私は趣味でやってる開発者です。ちょっとしんどいな…と感じ始めたタイミングでした。

そこで、どうするかというとHono一択でした。

詳細は以前に「HonoとmicroCMSでブログを作ってみた感想」というエントリで書いたのですが、microCMSとの相性が良いことは検証できていました。

JSXをサポートしているので、Next.jsチックにコンポーネントベースで開発が行えます。そのため、Next.jsのコードを書き換えるような感じで載せ替えを行うことができました。

よかった点

これは作者のyusukebeさんがよく言及していると思いますがDXがいいというのを強く感じました。

DXというと昨今の流行りのデジタルトランスフォーメーションが思い浮かびます。ここでは、developer experience、すなわち開発体験を指しています。

具体例をあげると、microCMSで躓きがちなdraft表示の部分をすっきりと書けた時に「おお、簡単だ」と感動しました。

/**
 * 下書き中の記事詳細ページ
 */
app.get('/post/:slug/draft', async (c) => {
    const slug = c.req.param('slug')
    const draftKey = c.req.query('draftKey')
    const client = createClient({
        serviceDomain: c.env.SERVICE_DOMAIN,
        apiKey: c.env.API_KEY,
    })
    const listDetail = await client.getListDetail<Post>({ endpoint: 'post', contentId: slug, queries: { draftKey: draftKey } })
    listDetail.title = listDetail.title + "（下書き）"
    const props = {
        post: listDetail,
        siteData: {
            title: listDetail.title,
            description: listDetail.description,
            ogpType: "article" as const,
            ogpImage: listDetail.thumbnail?.url,
            ogpUrl: config.siteURL + `/post/${slug}`,
        },
    }
    return c.html(<DetailContent {...props} />)
})

そう、Honoは開発していてとても楽しい。このあたりは以前のエントリにも書きました。

引用をします。

一貫して標準的なWEBの機能を提供しているという記述も見たことがあり、その枠内で好きなことをやればよし、という雰囲気があります。上で書いたスタイルの件も含めて自分の頭でいろいろ考える必要があるのですが、それがとても「作ってる」という感覚がして楽しい。

それと、とにかくデプロイが爆速なのが、気持ちいい。Next.jsではデプロイ時に静的生成を走らせていた関係で、３～５分ほど本番反映に時間がかかっていました。Cloudflare x Honoだと5秒くらいで本番環境に反映されます。この差は大きいです。

サイトの表示速度も速いので、Jamstack構成と比較してもストレスは全く感じないです。

今後の課題

とはいえまだまだ置き換えられてない機能も多いです。例えばsitemapの生成だったり、Google Analytics、Google Adsenseの設定なんかはまだ実装できていません。あと細かい点ですが、リンクカード機能なんかも載せられてないです。

このあたりも楽しくやれる気がしています。ではでは。

ソースコード

https://github.com/qlitre/hono-qlitre-dialy