Next.js × Hono × Cloudflare Workers で作品投稿が「404」になる理由（仕組みと発生ポイント）

自作の Next.js（フロント）× Hono/Cloudflare Workers（バックエンド）× D1（DB） の構成で作品投稿フォームを実装していたんだけど、

「作成に失敗しました」→ JSON パースエラー → ネットワークタブで 404

沼ったのでリサーチ

最初は「え、API叩いてるだけでこんなこと起きる？」って感じだったけど、

深掘りしていくと “あるある落とし穴” にドンピシャでハマっていた。。。。。 その構造を整理していく。

---

全体のフローはめっちゃシンプル

アプリの動きは3ステップだけ。

1. フロント（Next.js）

• URL: http://localhost:3000/admin/works/new
• 投稿フォームで「作品作成」ボタンを押す
• → JavaScript が動き、バックエンドへ POST リクエストを送信

本来送るべき先は

http://localhost:8787/api/works

---

2. バックエンド（Hono × Cloudflare Workers）

• ローカル開発は http://localhost:8787
• ルート定義は worksApi.post('/')
• つまり、Hono 側は /api/works で待機している想定

POST を受け取る → D1 に Insert → JSON を返す

という、ごく普通の API の動き。

---

3. フロント（レスポンス受け取り）

Workers から返ってきた JSON をパースして

UI を更新したり、エラー表示したりする。

---

ここまで見ると「何も問題なく動きそうじゃん？」という感じだった

今回のバグは “ルーティングのズレ” がトリガーになって崩壊したっぽい