Custom 404 Page not loading on build
Unanswered
Africanized honey bee posted this in #help-forum
Africanized honey beeOP
My folder structure
app/
(studio)
(frontend)
layout.tsx
not-found.tsx
When i do "npm run dev" and visit a 404 page, I get the not-found.tsx I built. When I run "npm run build" "npm run start" and visit a 404 page I get the nextjs default one. Is there something I need to do to get the built version to use my not-found.tsx?
Thanks
app/
(studio)
(frontend)
layout.tsx
not-found.tsx
When i do "npm run dev" and visit a 404 page, I get the not-found.tsx I built. When I run "npm run build" "npm run start" and visit a 404 page I get the nextjs default one. Is there something I need to do to get the built version to use my not-found.tsx?
Thanks
10 Replies
can you share a screenshot of the entire folder structure of your app? there are some caveats you need to account for when using route groups together with
not-found.tsx files.I had a similar conversation in [this](https://nextjs-forum.com/post/1151106357039210516) forum thread already, so give it a look and see if it helps you.
there could be a chance that it only accepts it on the very root (ie
app/not-found.tsx), but i could be wrong... + hope so...You're not wrong. You can have only one
A thing that you can do tho is have multiple different 404 pages nested deeply in the project structure, but they will be rendered only if you manually call the
not-found.tsx file per route segment, so in the case where there are two root layouts separated by route groups you still have to use a single not-found.tsx file for both groups.A thing that you can do tho is have multiple different 404 pages nested deeply in the project structure, but they will be rendered only if you manually call the
notFound function, otherwise a generic non existent page woul get caught by the root not-found.tsx.Africanized honey beeOP
@not-milo.tsx
This is what I have going on. Based on the other thread you linked to it seems like I need a not-found in /app but that means also having a layout which is something I don't think I want to do.
This is what I have going on. Based on the other thread you linked to it seems like I need a not-found in /app but that means also having a layout which is something I don't think I want to do.
Africanized honey beeOP
hmm so it's just when I go to /404 but if I put almost anything else in the url, it goes the the 404 I want
I'm travelling rn, I'll provide you with a working example as soon as I can ✌ðŸ»
Ok, so... With your current file structure you can keep the two route groups you set up as they are right now. But in order to have a root 404 page you'll have to add a root
layout.tsx file that can be literally empty (only html, body tags and children) and a root not-found.tsx. For sub-routes you can create as many nested not-found.tsx files as you'd like.This would be a valid structure