ブログ、Next.jsに移行しました。

@smile Blog @smile Blog まだまだ、つくる途中。blog.atsmile.dev

前回の記事でAstroをやめた理由を書きましたが、その後Next.jsでブログを作り直しました。構成はNext.js + microCMS + Cloudflare Workersです。

構成

今回選んだ構成はこちらです。

  • フレームワーク：Next.js
  • CMS：microCMS
  • ホスティング：Cloudflare Workers（OpenNextを使用）

ベースは microcmsio/nextjs-simple-blog-template を使いました。

Next.jsをCloudflare Workers上で動かすにはOpenNextというアダプターが必要で、ビルド出力をWorkers向けに変換してくれます。

やってみて

よかったこととしては、Next.jsは普段から使い慣れているので実装がスムーズでした。
microCMSの管理画面も直感的で、記事の投稿・編集がしやすいです。

大変だったのはCloudflare Workers特有のハマりポイントです。

HTMLパース用のライブラリcheerioがWorkers環境で動かず、undici起因のMessagePort is not definedエラーが出たため正規表現ベースの実装に置き換えました。

また本番環境の環境変数の設定漏れで500エラーになることが何度かありました。
ローカルのpreviewでは動いているのに本番だけ落ちるパターンで、最初は原因の特定に少し時間がかかりました。

まとめ

AstroからNext.jsへの移行はスムーズでした。
普段から使い慣れているフレームワークというのは大きくて、Astro特有の書き方に慣れる手間がなかった分、構成や実装に集中できました。

Cloudflare Workers周りのハマりポイントはいくつかありましたが、一度乗り越えてしまえばデプロイも自動化できて快適です。

今後は ISR + On-demand Revalidationを設定して、記事公開と同時に反映される仕組みを整えていく予定です。