---

---

API パス不一致が引き起こした404地獄と、その直し方

①では「フロント → API → Workers → D1」の流れを整理した。

②では、実際のバグの正体と、具体的な修正ポイントを残す

---

原因：フロントとバックエンドのURLがズレていた

ネットワークタブで見つけたのはこれ：

POST http://localhost:8787/works/create → 404

いやいや、/works/create なんてバックエンド側には存在しない。

バックエンドの定義はこう：

POST /api/works

つまり、完全にズレてる。そりゃ404になるわけだ。

そして Workers の 404 レスポンスは HTML。

その HTML を JSON としてパースしようとして、

Unexpected non-whitespace character after JSON

というエラーまで飛び出した。

もはや「404 → HTML → JSONパースエラー」という連鎖事故。

---

そもそもなぜズレる？

Next.js の URL（ページのURL）

/admin/works/new

と

API の URL（バックエンドのURL）

/api/works

は完全に別世界。

フロントのURL ≠ バックエンドのURL

という前提を忘れると、こういうルーティング事故が高確率で起きる。

あちゃーってやつだ

---

解決策：API クライアントのパスを修正

最優先でやるのはただ一つだった

フロントが叩く API のパスを /api/works に合わせること。

確認ポイントはこのあたり：

• apps/frontend/src/api-client.ts
• apps/frontend/app/admin/works/new/page.tsx
• 特に apiClient.works.create.post() がどのURLを叩いているか

ここを修正すると、Workers が正しいルートを処理し、

D1 への Insert も成功し、JSON も返るようになる。

めでたしめでたし。

---

まとめ：小さなズレが全体崩壊を引き起こす　まるでドミノ

今回のバグの因果関係はこんな感じ：

1. フロントが /works/create へ POST
2. バックエンドは /api/works を待機
3. → 404（HTML）
4. → JSON としてパース不能
5. → 「作成に失敗しました」UI

仕組みさえ理解すればめちゃ単純なんだけど、

Next.js × Workers みたいな フロントとバックエンドが完全に別サーバーの構成だと、こういうズレは超起こりやすい。

逆にいうと、今回の学びで

Next.js（App Router）と Workers API がどう協調して動くか？この辺を認識しないとだ

---