Use your custom 404 component on Vercel — Easy Fix

Question

I had just deployed a React application to Vercel, complete with routing and a custom 404 error page. I tested the live site in Vercel and tried visiting a non-existent route, but I couldn’t! Vercel’s default 404 page was rendered instead of my custom component.

Here’s how I fixed it

I needed to find a way to overwrite the default action by Vercel, so I conducted some research. So here’s what was happening - Vercel served its own 404 page before my React app loaded.

To fix this, first create a vercel.json file. Use the following code snippet in your file.

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

That was it! I redeployed the application, and now my 404 component was rendered instead of the default one from Vercel.

I hope this solution helped you. If so, please leave a comment below.

Thanks for reading, ciao

P.S. If your cursor starts acting up in VS Code, check out this article

Comments

Thanks for sharing this! Just wanted to add a quick heads up for anyone following this approach, while the rewrites block in vercel.json does help your React app render its own 404 component (especially with React Router), it doesn't actually serve a real 404 error.

What's really happening is that all paths are being routed to /, so the app shows the “Not Found” view, but the server still returns a 200 OK status. That can confuse search engines, analytics tools, and anyone expecting actual 404 responses.

Suggestion:

• For proper 404 behavior in SPAs, consider serving a 404.html and let Vercel handle that natively (works great for static builds).
• If you're using React Router, make sure you’ve set up <Route path="*"> to catch unmatched routes inside the app.
• If SEO or error reporting is important, you might want to add logic to manually set window.status = 404 or use serverless functions with proper headers.

Great workaround for clientside apps though, just good to know the tradeoffs.

---

Thanks a lot for this! I really appreciate it