Next.jsをcloudflareにデプロイに詰まった話

やりたかったこと

デプロイを行う
フロントエンドをcloudflarepages
バックエンドをcloudflareWorkers

詰まったポイント

そもそものNext.jsの構成理解

１フロントとバックエンドがくっついている構成を作成可能
→分離させる大きな理由がない限りは単体でよい

２別途ビルド生成物をアップロードする必要がない
→選ぶことは可能だが機能が制限され利点が失われる

３cloudflareWorkersに単体でデプロイすることでwabアプリとして機能する
→cloudflarepagesは使わなくてよいことに気づく
URLはWorkersでも発行されるから問題ない

４キャッシュがストレージに入るためほぼ必須

通常のビルドでは動作しない

これを使う
package.json

//コマンドを作成
"opennext:build": "opennextjs-cloudflare build"

//このパッケージが必要、最新バージョンは互換性がなかったため1.11.1を使用
"@opennextjs/cloudflare": "^1.11.1"

node16も対応してない！！あとwindwsからtomlでアプリをアップロードしようとしたけど無理だったゾ！！

cloudeflare側でコマンドを使用するように設定
ルートディレクトリを設定（git連携でモノレポ構成のため指定が必要になった）

パッケージの互換性

互換性確保のためバージョンを以下のものを使用

package.json全体

{
  "name": "trpg-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "opennext:build": "opennextjs-cloudflare build",
    "start": "next start",
    "lint": "next lint",
    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy"
  },
  "dependencies": {
    "next": "^16.0.3",
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@opennextjs/cloudflare": "^1.11.1",
    "@types/node": "^20.11.10",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "autoprefixer": "^10.4.20",
    "esbuild": "^0.24.2",
    "eslint": "^9.39.1",
    "eslint-config-next": "^16.0.3",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3",
    "wrangler": "^4.50.0"
  }
}

その他

矢印の方から作るとpagesを作れるけど
「アプリケーションを作成する」から作るとwoekersしか作れないから注意