Resolving the Vercel 404 "Page Not Found" Error After Page Refresh.

I recently completed a project(cinemaxtv.vercel.app), which is a movie application. After deploying the application on Vercel, I noticed an unusual issue. Whenever I navigate to a different page and refresh that specific route, I encounter a 404 Not Found Error, indicating that the specified route cannot be found. However, I achieve the desired result when I perform the same action on my local host. Consequently, I deduced that the error is likely due to a deployment glitch on Vercel.

A pictorial display of the 404 not found error above

After conducting some research, I discovered a solution for resolving this issue. To rectify the 404 Not Found Error, it is necessary to establish redirect and rewrite rules for your React Router application. These rules will assist your application in circumventing the "Page Not Found" error.

To begin, generate a vercel.json file in the root directory of your project. This file will enable Vercel to configure the routing accurately, and you should insert the following code snippet in the image below.

This image represents the structure of the vercel.json file and the code snippet.

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

The provided code snippet instructs Vercel to rewrite any incoming URL path to the root path. This configuration ensures that when we initiate a redirect with a child path, Vercel will redirect it to the root path, effectively preventing the occurrence of the 404 Not Found Error.

If your project has already been deployed, push the changes to your GitHub repository and refresh the page, you will obtain your desired result seamlessly, without encountering any issues.

voila! It now works.

Conclusion
If you find this article interesting, please consider liking and sharing it. Additionally, I welcome your thoughts and feedback in the comment section below. Thank you for your engagement.

Open to work🙂
Did you enjoy this article or need an experienced Technical Writer / React Developer for a remote, full-time, or contract-based role? Feel free to contact me.
Github || Linkedin || Twitter

Comments

[Hassan]

I don't know why my error still persists

[Stanlisberg]

What error are you getting?

[Abusomwan Santos]

my links arent working, like when i try to navigate to /about. only the navbar works

[Stanlisberg]

I meant, what is the content of the error message? Kindly send a screenshot of the error and your routing set up to help assist you better.

[Abusomwan Santos]

Its strange cause it works well in dev mode, i can navigate between links but it fails on prod mode

[Abusomwan Santos]

[Stanlisberg]

Since it works fine in dev mode, the issue must be linked to the deployment.

Did you deploy with vercel?

[Abusomwan Santos]

yes im using vercel

[Stanlisberg]

Did you try to set it up like i did on this article?

If you followed all the steps I outlined in the article judiciously, I believe the routing problem will be rectified.

[Abusomwan Santos]

yes I did, but it redirects all routes to the home page

[Stanlisberg]

For the fact that it works in Dev mode, the issue has to do with deployment. I had similar issue after implementing all the steps in my article and forgot to push changes to my GitHub repo. So you have to consider pushing your changes to your repo if you forgot to do that earlier.

...anyways, i'd implore you to create another json.vercel file, input the rewrites code snippet, restart your server and push changes to your repo. Let's see the outcome.

[Abusomwan Santos]

strange cause im getting same error like your post but its not working even with the vercel.json

[A.R. Mohamed Aliyar]

If you use react-router it may happen because react-router redirects pages in the client-side itself if any reload happens it will send a request to the server side and if the request isn't handled it will persist. you may refer
to this here. I have the same issue. If someone knows kindly let me know.

[Md Suny Shaikh]

Same error page not found

[Hamza Gorcevic]

try adding and rebuild, module.exports = {
trailingSlash: true,

[CodeKooper]

Thanks for this.
For flutter apps or Single page apps, the following helped me :

{
  "rewrites": [
    {"source": "/:a*", "destination": "/"}
  ]
}

[riturajmahapatra]

Thanks for this i was just running amock as a headless chicken as why it is not working. Thanks a ton.

[Tulio Salvatierra]

This worked for me so thank you!

[Kudakwashe Masaya]

Awesome, thank you

[Stoic]

Can I ask where you got the API for fetching movie details? I also want to build a similar application but having trouble finding the appropriate API

[Agus Puryanto]

Error: If rewrites, redirects, headers, cleanUrls or trailingSlash are used, then routes cannot be present.

[Arif Wijianto]

works for me, thanks you <3

[vinicius barth]

this resolved the problem, thanks bro 😀

[KWIZERA Caleb]

It worked for me