Cloudflareでホスティングしているサイトがビルドエラーになった（Next.js）

microCMSで運用、Cloudflareでホスティングしているサイトがビルドエラーになったのでその時の解決方法を紹介する。

経緯

今まで特に問題なく運用できていた当サイト。microCMSで記事を更新しているのだが、本日記事を更新してもなぜかビルドが始まらなかったので調査をしたところ、Cloudflare側で以下のようなエラーが出ていた。

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️  The following routes were not configured to run with the Edge Runtime:
⚡️    - /apple-icon.png
⚡️    - /icon.png
⚡️    - /robots.txt

このエラーはCloudflare Pages が Next.js の Edge Runtime を要求しているのに、一部のルートが Edge Runtime 用に設定されていないためにビルド失敗していたようだ。対策として2点方法がある。

対策① runtime = "edge" を設定

Cloudflare Pages で Next.js (特に next-on-pages) を使う場合、静的ファイル（robots.txt, icon.png など）も含めてすべてのルートが Edge Runtime 互換である必要がある。app/ ディレクトリ配下のすべてのページで以下を追記する

export const runtime = "edge";

同様に app/blog/[slug]/page.tsx や app/contact/page.tsx などにも追加。

対策② 静的ファイルを public/ に移動

robots.txt, icon.png, apple-icon.png はAPI ルートではなく純粋な静的ファイルとして配信したいはずなので、public/ に置けばOK。Next.js は public/ 内のファイルをそのままルート直下に出力する。（今回自分はこの方法をとった）

my-next-project/
 ├─ public/
 │   ├─ robots.txt
 │   ├─ icon.png
 │   └─ apple-icon.png

これで /robots.txt /icon.png /apple-icon.png がそのまま配信され、Edge Runtime の設定不要になる。

今までこの設定で特に問題なく運用できていたので、急に更新されなくなり焦ったが、軽微な修正だったので安心した。