CODEWITHSUNDEEP
javascriptreactjsnext.jshttp-status-code-404netlify
Krish
Krish

Reputation: 1894

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

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.

enter image description here

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

Upvotes: 3

Views: 1751

Answers (2)

Krish
Krish

Reputation: 1894

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

Upvotes: 2

MarioG8
MarioG8

Reputation: 5921

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/

  1. I added a _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:

  1. 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

Upvotes: 1

Related Questions