Use your custom 404 component on Vercel — Easy Fix

posted Originally published at medium.com 1 min read


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

If you read this far, tweet to the author to show them you care. Tweet a Thanks
0 votes
0 votes

More Posts

Deploy your application on Vercel with GitHub Actions

OctoLab - Aug 20

Mastering React: A Mindset for Component-Centric Development

Losalini Rokocakau - May 3, 2024

Vibe Coding: Ship Fast, Fix Later (Your Code Can Be Ugly, Just Make It Work)

Sourav Bandyopadhyay - May 8

CSRF Token in Web Development: Secure Your React, Next.js, Django & Laravel Apps

Raj Aryan - Jun 9

Designing Viral UX/UI That Spreads Itself

Raj Aryan - Aug 2
chevron_left