Vercel 404: NOT_FOUND when refreshing a page or opening a direct link

What it means in plain English

Lovable and Bolt build "single-page apps": there's really only one HTML file and the app draws each page in the browser. When you refresh /dashboard, Vercel looks for a file called dashboard, finds none, and shows 404.

Likely causes

• No SPA rewrite rule in vercel.json.
• Wrong output directory (e.g. Vercel serving the repo root instead of dist).

How to fix it, step by step

1. In the project root, create (or edit) vercel.json:

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

2. Vercel serves real files first, so images, JS and CSS keep working.
3. Check Project → Settings → Build & Development: framework Vite, output directory dist.
4. Commit and push (or ask Lovable/Bolt: "Add a vercel.json SPA rewrite to index.html") and let it redeploy.
5. Next.js apps don't need this; a 404 there means the route file truly doesn't exist.

How to check it worked

• Open https://yourapp.com/some-inner-page directly and press refresh; it should load.
• Check a missing route shows your app's own 'not found' screen.

Sources

• https://vercel.com/docs/project-configuration/vercel-json (opens in a new tab)
• https://vercel.com/docs/errors/NOT_FOUND (opens in a new tab)