Nextjs custom 404 page not showing when accessing invalid url in netlify

Question

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

Answer 1

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