このウェブサイトのブログ部分をmicroCMSからEmDashに移行したので適当に書きます。おそらくこのウェブサイトで一番適当な記事です。
もともとはNext.js + microCMSの構成でしたが、なんとなくデータが手元にないことを不安に思い、自前でデータを管理できるCMSないかなぁ～と考えていました。
それでちょっと考えたら、ある。そういえば私の愛してやまないCloudflareがなんか出してたわ。それこそがEmDashです。Astroベースで、管理画面もあって、MCPも内蔵されてて、なんかWordPressの後継を名乗ってるらしい。でもちろんCloudflareエコシステムと相性がいい。
じゃあ使ってみるか、となりました。
Astro←❓️
EmDashを使うにあたって1つの懸念はAstroでした。Astro触ったことない。なんかJavaScriptを明示宣言で使うらしい？？？ブログ部分以外の箇所はせっかく作ったので作り直したくない、作り直してデザインが再現できるか不安。
というわけで、一旦はモノレポにして、portfolioとEmDashを分けました。EmDashで記事管理して、portfolio側からAPI叩く作戦です。
完成してから、これportfolioもAstroでよくないか、と思い始めました。モノレポめんどいし。せっかくEmDashを使うなら、Next.jsを残すより、使ったことないAstroを触ってみるのも楽しそうだと思ったからです。
少しリサーチしたところ、幸いなことにReact integrationがありました。既存のコンポーネントを全部捨てる必要はなさそうです。
ここからNext.jsを消して、Astroに移す作業がはじまりました。
まあ動かん
もちろん一発では動きません。
まずReactのhookで怒られました。Invalid hook call←なに？？？
Astro上でReactコンポーネントを動かすとき、普通に読み込むだけだとReactの実行環境と合わない？みたいな話らしいです。結局、React islandとして client:only="react" を明示して動かす形にしました。非推奨の実装なのかもしれませんが、まあAstro初心者だしいいでしょう。良くなかったら教えてください。
次にEmDashのデータ取得。EmDashとポートフォリオを同じアプリで管理することになったので、予定通りEmDashのコレクション取得を直接使う形に変えました。
次にハマったのが画像です。
コンテンツ側には画像の id を入れてたので、それを使ってリクエストを叩いたら、画像が404。
実際にAPIが受け取るのは meta.storageKey でした。
/_emdash/api/media/file/{id} では404で、正しくは
/_emdash/api/media/file/{storageKey} にしないといけないらしいです。謎。
Docsを読まずにCodexに適当な指示をだしたぼくがわるいです。
結果
最終的に、構成はかなりすっきりしました。
Next.jsは消えて、portfolioは完全にAstroになりました。ブログにはEmDashネイティブの構成を使ってるので、ページ上から編集もできてかなりWordPressっぽい。満足です。
まだ細かい調整は必要かもしれませんが、とりあえず動くようになったので激アツ。