Custom 404 page not showing

Support
, ,
1

Hey,

We have a deployed Next.js site on netlify which has a custom 404 page (src/pages/404.tsx) but it is not working on the deployed version of the site, instead showing a generic netlify 404 page. It does work locally both with a dev and production build.

What I have tried:
Adding redirects like this in netlify.toml:

[[redirects]]
  from = "/*"
  to = "/404"
  status = 404

deployed site: https://main--futurice-dev.netlify.app/

2

@yann.jorelle I could be wrong as I don’t work with next.js and I’m aware it tends to run with middleware on Netlify, but the general behavior on Netlify is that if you have a /404.html file, it’ll be what gets loaded.

The redirect that you have specified would seem to go to that same file.

Does your build produce a /404.html file or is /404 a route in the SPA?

3

Hey @nathanmartin, the build doesn’t produce a 404.html (but a 404.js) so I guess it’s a SPA route?
Sorry if my answer doesn’t make sense, I’m new to next too :sweat_smile: !

4

@yann.jorelle Often SPA’s handle the 404’s themselves, in which case you would route to the /index.html

As Next runs with middleware though, it could be doing anything.

You’ll have to wait till Netlify’s team can take a look.

5

Just realized this may be a problem with Next 13 expecting a different directory structure

6

Apparently that was not the issue :confused:

8

We’ve responded to this in the helpdesk, but you’d basically have to change fallback: false to fallback: 'blocking' in your code.

1 Like