I've created a 404.js file in /pages folder on my Nextjs project, the 404 page is working perfectly when entering an error or invalid URL in local but when its deployed in netlify they showing the default netlify error page.
version details
"next": "^10.0.4",
"react": "17.0.2",
Tried netlify's redirect rule, but nothing happened
[[redirects]]
from = "/*"
to = "/404.html"
status = 404
I found a solution when randomly changed the redirects rule based on this article https://docs.netlify.com/routing/redirects/#syntax-for-the-netlify-configuration-file
Here is my fix, it's working when redeployed after.
Create a netlify.toml file in the project directory and paste below code.
[[redirects]]
from = "/*"
to = "/404"
status = 404
I found two solution from this page => https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
_redirects file inside the /public folder like /public/_redirects. I then pasted /* /index.html 200 into the _redirects file.redeploy your app and it's done
Or second way:
Add netlify.toml file to the root directory of your project and paste in to:
[[redirects]]
from = "/*"
to = "/"
status = 200
redeploy your app and it's done