【Cloudflare】node js compatibility error cloudflareの解決方法

はじめに

Next.js{で作成したアプリをCloudflare Pages`にデプロイする際に発生したエラーと、その解決方法についてまとめた記事です。

この記事は、個人的なアウトプットを目的として作成しています。内容には誤りや不足が含まれている可能性がありますので、もしお気づきの点がありましたら、ご指摘いただけますと幸いです。

現象

Next.jsで作成したアプリをCloudflare Pagesにデプロイしたところ、ビルド自体は成功したものの、実際に表示してみると以下のようなエラー画面が表示され、ページが正常に表示されませんでした。

解決方法

Cloudflare Workers（Pages Functions）では一部のNode.js APIがサポートされていないため、Next.jsの一部処理において互換性の問題が発生します。これを解消するには、Cloudflare側でNode.jsとの互換モード（nodejs_compat）を有効にする必要があります。

方法1：ダッシュボードから設定する場合

Cloudflareの管理画面から以下の手順で設定します。

1. 設定→ランタイム→互換性フラグに移動
2. nodejs_compatを有効にする

方法2：wrangler.jsonに設定を追加する場合

プロジェクトルートにあるwrangler.jsonに、以下のようにcompatibility_flagsを追加します。

{
  "name": "kpop-challenge-finder",
  "compatibility_date": "2024-09-23",
  "compatibility_flags": ["nodejs_compat"], //nodejs_compatを追加
  "pages_build_output_dir": ".vercel/output/static"
}

終わりに

今回のようにnodejs_compatを有効にすることで、Next.jsアプリでもスムーズに動作するようになります。同様のエラーで困っている方の参考になれば幸いです。

参考

『Cloudflare x Next.js x microCMS 爆速ブログ作成備忘録』Zenn

『Next.jsをGitHub挟んでCloudflare Pagesにデプロイする』Qiita