wouterを使ったルーティングをVercelでデプロイした時の404エラー

背景

wouterを使ったVercelでデプロイした時にページが404になることがありました。

wouterについてはこちらを参考
https://zenn.dev/uttk/articles/introduction-of-wouter

最初トップページを開く段階は問題なく、他のページにも遷移はできるのですが、遷移した先のページでブラウザをリロードして更新すると404になるというもの。

普段Next.jsで開発してるため、ローカルで開発していると気づけなかったことが浮き彫りになったので、ここに備忘録として残し。

原因

このエラーが起きる理由として、vercel.json での解決の仕組みが関係している。

ざっくりと見るとこのような感じ。

example.com/about の場合

クライアントサイドの場合：
ブラウザ内のJavaScript(Wouter)が /about というパスを処理 → 正常に動作

ページ更新時：
サーバー(Vercel)が /about というファイルを探しに行く
→ 実際のファイルは存在しない
→ 404エラー

解決

vercel.json での解決

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

この設定をすると
どのURLにアクセスされてもすべて index.html を返すようになる。
その後、クライアントサイドのRouterが正しいページを表示する。

処理の流れとしてはこう。

1. ブラウザ: example.com/about にアクセス
2. Vercel: /index.html を返す（vercel.jsonの設定による）
3. ブラウザ: JavaScriptが読み込まれる
4. Wouter: /about を検知して適切なコンポーネントを表示

このような設定が必要なのは、SPAで開発しているとよくある現象だと思うが、普段からNext.jsを使っていて、VercelでもNext.jsのデプロイをしていると盲点になるポイントかと思いました。
すべてのルーティングをフロントエンド側で管理しているため、サーバー側でもそれに対応する設定が必要ということですね。