Custom error/404 page on pages router does not override default error/404 page
Unanswered
European Starling posted this in #help-forum
European StarlingOP
Same question asked here https://stackoverflow.com/questions/77975436/custom-404-page-wont-overrule-default-404-page-in-next-pages-router
doing exactly what the docs say (https://nextjs.org/docs/pages/building-your-application/routing/custom-error) and yet incorrect route always gives the default 404 page rather than the pages/404.tsx file that I made. Going to /404 shows it.
Renaming it to not-found.tsx stops the default one being shown but breaks the page. I think 'not-found' is something for the app router (https://nextjs.org/docs/app/api-reference/file-conventions/not-found) rather than pages router so probably not correct thing to do but makes me suspicious that nextjs isn't doing what it's supposed to.
doing exactly what the docs say (https://nextjs.org/docs/pages/building-your-application/routing/custom-error) and yet incorrect route always gives the default 404 page rather than the pages/404.tsx file that I made. Going to /404 shows it.
Renaming it to not-found.tsx stops the default one being shown but breaks the page. I think 'not-found' is something for the app router (https://nextjs.org/docs/app/api-reference/file-conventions/not-found) rather than pages router so probably not correct thing to do but makes me suspicious that nextjs isn't doing what it's supposed to.
4 Replies
European StarlingOP
downgrading next from 14 to 12 fixed it. however, this is not a solution. I think NextJS themselves need to fix this bug.
Northeast Congo Lion
had this exact Q so was happy to find this thread
not-found.tsx is App router specific, it's been like this since Next.js v13. Route level not-found.tsx will only show if you explicitly call notFound() inside the route, only this will trigger not found pages per route level. Otherwise you'll get the root not-found.tsx, and if you don't have one, you'll get the Next.js default one.Northeast Congo Lion
It sounds like both of us are on the pages router @LuisLl so I don't believe not-found is applicable here (though I did also try it as I found that 404.js wasn't rendering and experienced the same problem)
As a workaround for pages router not overriding default 404 with given
As a workaround for pages router not overriding default 404 with given
404.js I ended up redirecting to 404 via router.push('/404') inside my render function if I'm unable to find a page for the given slug, though this isn't a great solution