大苦戦トラブルまとめ

Cloudflare+OpenNext構成での「データ取得できない」大苦戦トラブルまとめ

🎬 状況・やりたかったこと

  • Next.js（OpenNext）＋Honoバックエンド＋Cloudflare D1/R2で本番想定の構成を開発＆検証
  • フロントはOpenNext＋wrangler devでCloudflare Worker模擬
  • バックエンドはHono/TypeScript＋D1/R2でAPI提供

🔥 詰まったトラブル

  • 「worksページでデータ取得できず」エラー
    • ❌ データの取得に失敗しました
    • Chromeコンソールに ReferenceError: __name is not defined
  • localhost:8787/api/works にアクセス → 404
  • バックエンドAPI自体は http://localhost:55888/api/works で生きている

🧩 原因の切り分け〜解決までの「実践ノート」

1. APIエンドポイントの競合/向き先ミス

  • フロント/バックエンド両方が 8787 *で立ち上がろうとして競合し、どちらかが別ポート（***55888**など）へ自動で逃げていた
  • lib/api-client.ts のAPI_BASE_URLが環境変数やローカル起動方法によって意図通りになっていないケースも発生
  • → 解決策：環境ごとにAPI_BASE_URLを明示し、環境変数を正しくセット

2. Cloudflare OpenNext × Wranglerの落とし穴

  • OpenNext+wrangler dev でフロントを立ち上げると、**Next.js標準の3000番とは違うワーカー用ポート（例: 8787）**になる

    → ここで「APIも8787で立つ」と誤認しやすい

  • APIクライアントのベースURLが localhost:8787 固定だったため、バックエンドAPIの実サーバーに到達できず404

3. __name is not defined エラーの正体

  • OpenNext × Wrangler × Minifyの仕様で、minification時に__name参照がバグる
  • 公式Doc で「wrangler.jsoncで keep_names: false を明示すれば回避できる」と判明

4. Cloudflareの設定ファイル見直し＆統一

  • これまでは**wrangler.tomlで管理** → **wrangler.jsonc**で管理に変更（OpenNextの推奨）
  • .envファイルで NEXT_PUBLIC_API_URL などフロント用の環境変数を管理
  • APIクライアントは process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8787' でベースURLを柔軟に
  • backendは引き続きwrangler.tomlでOK

5. トラブルシュート手順（総まとめ）

  1. .next / node_modules / lockファイル削除＆再インストール
    • rm -rf .next node_modules package-lock.json
    • npm install
    • npm run build
  2. Cloudflare設定ファイル（wrangler.jsonc/toml）・.envの整合性を再確認
  3. backendのみ起動 → APIが生きているか（/api/worksでレスポンス来るか）を単独チェック
  4. frontendのみ起動 → API_BASE_URLが正しく参照できているか
  5. フロント・バックエンド両方起動 → 連携が取れているか（/works画面でデータ表示）を確認

💡 今後に生きる現場ノウハウ

  • OpenNext × wrangler環境は「APIのベースURL」と「ポート管理」に超注意
  • フロント/バックエンドがAPIをどこに向けてリクエストしているかはNetworkタブで必ずチェック
  • ReferenceError: __name is not definedはCloudflare環境でのminify問題（wrangler.jsoncのkeep_namesで即回避可）
  • .env運用＆パスの渡し方はローカル開発・Cloudflareそれぞれの流儀を押さえておくと安心

🏁 最終的な解決アクション例

  1. frontend/.env 作成

    NEXT_PUBLIC_API_URL=http://localhost:8787

  2. frontend/lib/api-client.ts

    const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8787'

  3. frontend/wrangler.jsonc

    {
  "$schema": "node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "unlabeling-frontend-production",
  "keep_names": false,
  // ...
}

  4. backendはwrangler.tomlを維持（Cloudflare D1やR2などバインディングOK）

  5. 不要なwrangler.tomlは削除（frontendやルート直下などダブり注意）

  6. npm run build / wrangler dev で挙動確認！

🏆 このトラブルで得たもの（要点）

  • API・ポート・環境変数のズレ切り分け力
  • Cloudflare Workers × Next.jsの現場トラブルシュート経験
  • MinifyやWrangler固有エラーのリサーチ&即応ノウハウ
ブログ一覧に戻る