🐞 Issue: 404 NOT_FOUND When the application is deployed on Vercel, client-side routes (e.g. /login) work correctly during in-app navigation.

[sai4u-dev]

When the application is deployed on Vercel, client-side routes (e.g. /login, /signup) work correctly during in-app navigation.
However, refreshing the page or directly accessing a nested route results in a 404: NOT_FOUND error.

✅ myapp.vercel.app
✅ myapp.vercel.app/signup (via navigation)
❌ myapp.vercel.app/signup (on browser refresh)

[sai4u-dev]

🔍 Root Cause

This project is a Single Page Application (SPA) using client-side routing.

On page refresh, Vercel treats routes like /login as server-side paths and attempts to locate a corresponding file. Since these routes are handled by the frontend router, Vercel returns a 404 error.

The deployment lacks a rewrite rule to redirect all routes to index.html, which is required for proper SPA routing.

Solution to fix the issue.

Add vercel.json configuration file at the project root. and redeploy the project.

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