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:
from = "/*"
to = "/404"
status = 404
deployed site: https://main--futurice-dev.netlify.app/
@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?
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 !
@yann.jorelle Often SPA’s handle the 404’s themselves, in which case you would route to the
As Next runs with middleware though, it could be doing anything.
You’ll have to wait till Netlify’s team can take a look.
Just realized this may be a problem with Next 13 expecting a different directory structure
Apparently that was not the issue
We’ve responded to this in the helpdesk, but you’d basically have to change
fallback: false to
fallback: 'blocking' in your code.