App RouterをCloudflare Pagesで公開した際にぶち当たったこと
masa5714Cloudflare PagesでNext.jsのApp RouterでSSRするWebアプリケーションをデプロイした際に発生した問題をいくつか挙げていきます。
masa57141. Edge Runtimeを有効にしなければならない
SSRが伴う箇所で要求されたのですが、
Edge Runtimeを有効にする必要がありました。
これ自体は大きな問題もなく、各 page.tsx に export const runtime = "edge"; を追記するだけで解決しました。
masa57142. 動的サイトマップの生成ができなかった
import { MetadataRoute } from "next"; で動的サイトマップを生成したかったのですが、これが Edge Runtimeに対応していないようで使えませんでした。
変わりに力技で sitemap.xml を出力するコードを自作しました。
40万ページ以上あったのでサイトマップを分割しないといけないのですが、 MetadataRoute が使えないので分割処理も書かなければなりません。
/src/app/articles/${id}/sitemap.xml に出力するようにしました。
${id} は数字が入っているのですが、こうすれば、 https://example.com/articles/0/sitemap.xml や https://example.com/articles/1/sitemap.xml のように分割したサイトマップが参照できるようになりました。
力技感がエグいですが他の解決策もなさそうなので仕方なく...。
サイトマップだけでかなり時間を溶かしました。（トータル8時間ぐらいは行ってると思う）
masa5714とはいえ、起きた問題はこれぐらいでしたので、割とスムーズだったと思います。
Cloudflare Pagesにデプロイする際に参考にした記事も紹介しておきます。
nodejs_compat はプレビューとプロダクションの両方に設定する必要があるので注意してください。（プレビューの方設定してなくて少し時間溶かした。）
masa5714ちなみに、 Next.js + Supabase の構成でやっていて、この構成でも問題なく公開できたということをここにご報告します。
masa5714サーバー代無料！！！！！！
やったぜ。
Cloudflareとかいう慈善団体マジ感謝