Next.js15 App RouterをCloudflare Pagesにデプロイする

2025年1月16日現在での方法です。

はじめに

いつもはNext.jsのプロジェクトをVercelにデプロイしていたのですが、将来的に広告を入れる可能性を考え、Cloudflare Pagesにデプロイしてみました。

エラーなどが出て大変だったので手順をメモしておきます。

内容や言葉遣いが誤っている可能性があります。

環境

• Next.js v15.1.4
• @cloudflare/next-on-pages v1.13.7
• yarn v4.6.0
• node.js v20.11.1

Node.jsやNPM、Yarnの環境や、基本的なNext.jsの知識についてはある前提で進めます。

手順

1. Next.jsプロジェクトを作成する

npx create-next-app@latest cloudflare-sample-app

2. ランタイムをEdgeに変更

Cloudflare PagesではランタイムはNode.jsではなくEdgeが使用されます。
サーバーサイドのファイル（page.tsxやroute.ts）に以下のコードを追加します。

export const runtime = "edge";

3. @cloudflare/next-on-pagesをインストール

yarn add -D @cloudflare/next-on-pages

4. wrangler.tomlファイルを作成

toml wrangler.toml

name = "my-app"
compatibility_date = "2024-07-29"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

ドキュメントには上記のようになっていますが、私はエラーが起きたため、compatibility_dateを"2024-09-23"に変更しました。
また、nameは適宜変更してください。（後ほど作るCloudflareのプロジェクト名と同じにしておくと便利です。）

5. GithubとNext.jsプロジェクトを連携する

作成したNext.jsプロジェクトをGithubのリポジトリのmainブランチにプッシュしてください。

6. Cloudflareのプロジェクトを作成する

Cloudflareのダッシュボードで、左のメニューから、Compute(Workers)->Workers & Pages'を開き、作成`ボタンを押します。

Pagesのタブを開き、Gitに接続ボタンを押します。

Githubと接続するとリポジトリを選べるので、先ほど作成したリポジトリを選択します。

フレームワークプリセットをNext.jsにし、環境変数に以下のものを追加します

Name	Value
NODE_VERSION	22.12.0
YARN_VERSION	4.6.0

NODE_VERSIONは、ビルドに使用するNode.jsのバージョンです。
デフォルトは18.17.1ですが、これはエラーが起こるので20以上にしておきます。

YARN_VERSIONはローカル環境のyarnのバージョンに合わせてください。
yarn.lockファイルの書き方がバージョンによって異なることによるデプロイ時のエラーが発生します。

環境変数はプロジェクト作成後も、設定のタブから編集できます。
productionとpreviewの2つがあるので、両方とも設定するようにしてください。
previewに設定していなくて原因がわからず2時間溶かしました。

これでデプロイが成功するはずです。
（しなかった場合は再デプロイしてみてください。）

エラー達

✘ [ERROR] Could not resolve "async_hooks"

✘ [ERROR] Could not resolve "async_hooks"


    <stdin>:596:680:
      596 │ ...umerable:!0})),e);_(exports,{default:()=>N});var R=A(require("async_hooks")),S="@next/request-context",f=Symbol.for(S),C=Symbol.for("i...
          ╵                                                                 ~~~~~~~~~~~~~

  The package "async_hooks" wasn't found on the file system but is built into node. Are you trying
  to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

このサイトを参考にした。

次の2つで解決した。

1. 上に書いた通り、wrangler.tomlのcompatibility_dateを"2024-09-23"にする
2. package.jsonに

   {
       // existing code
       "overrides": {
           "vercel": "$vercel"
       },
       // existing code
   }
   

   とかく

終わりに

かなり遠回りをしてしまい、デプロイだけで5時間くらいかかってしまいました。
もし上記の方法でうまくいかない場合はコメントで教えていただきたいです。

参考にしたサイト等