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.htmland 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 = 404or use serverless functions with proper headers.
Great workaround for clientside apps though, just good to know the tradeoffs.