【Vercel × Vite × React Router】Reactの/:idページが404になる原因と解決方法

はじめに

Reactで制作したアプリをVercelにデプロイした際、ビルドエラーは出ていないのに/以外のページが404 Not Foundになってしまいました。特に/:idのページが表示できなかったので、その解決方法をまとめました。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

原因

VercelがReactのサブページを認識できていないことが原因です。
ViteとReact Routerを使用した場合はクライアントサイドルーティングを採用しているため、ブラウザで/:idに直接アクセスすると、Vercelのサーバーはindex.htmlではなく404 Not Foundを返してしまいます。

解決方法

Vercelにrewritesを設定し、どのルートでもindex.htmlを返すようにします。

{
  "rewrites": [
    {
      "source": "/:hoge",
      "destination": "/index.html"
    }
  ]
}

この設定により、/:hogeへのアクセスがindex.htmlにリダイレクトされ、Reactのルーティングが正しく機能するようになります。

終わりに

この問題はNext.jsでは発生しないため、ReactとNext.jsの違いを意識することが重要です。今後もそれぞれのメリット・デメリットを理解しながら、適切なフレームワーク選びをしていきたいと思いました。