Next.js Discord

Discord Forum

Nested not-found.tsx not working

Answered
Simon Knittel 🍹 posted this in #help-forum
Open in Discord
Simon Knittel 🍹OP
I'm having trouble with a nested not-found.tsx. Imagine following directory structure:
- app/
-- layout.tsx
-- not-found.tsx
-- folder/
--- layout.tsx
--- not-found.tsx
When I request localhost:3000/folder/foobar it shows me the not-found.tsx of the root directory. I expected that it shows me the not-found.tsx of the folder directory instead.
Am I misunderstanding something? Are nested not-found.tsx not a thing?
Answered by riský
Good to know: In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the app/not-found.js file.
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
the nested ones only work when manually called not found
View full answer

12 Replies

@Simon Knittel 🍹 I'm having trouble with a nested `not-found.tsx`. Imagine following directory structure: - app/ -- layout.tsx -- not-found.tsx -- folder/ --- layout.tsx --- not-found.tsx When I request `localhost:3000/folder/foobar` it shows me the `not-found.tsx` of the root directory. I expected that it shows me the `not-found.tsx` of the `folder` directory instead. Am I misunderstanding something? Are nested `not-found.tsx` not a thing?
riský
Good to know: In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the app/not-found.js file.
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
the nested ones only work when manually called not found
Answer
Simon Knittel 🍹OP
oh
I've read that page up and down multiple times but never catched that point.
Thanks for pointing that out!
riský
i have seen some fix/work arround this by making optional matchall thats purpose is to call not found lol
@Simon Knittel 🍹 I've read that page up and down multiple times but never catched that point. Thanks for pointing that out!
riský
yeah it honesly kinda makes sense what it does, but also doesnt at same time
Simon Knittel 🍹OP
Yeah, I've also seen these workarounds but they had some slight other issues so I didn't try those
Simon Knittel 🍹OP
Using a catch-all works for me.
There is this note about not-found routes:
Along with serving a custom UI, Next.js will return a 200 HTTP status code for streamed responses, and 404 for non-streamed responses.
But for my use case it's fine that this won't work with the catch-all workaround
riský
i wonder if you can use catch all with route.ts
Simon Knittel 🍹OP
Not sure what meant. My setup is now following:

- app/
-- layout.tsx
-- not-found.tsx
-- folder/
--- layout.tsx
--- not-found.tsx
--- [[...not-found]]/page.tsx
@Simon Knittel 🍹 Not sure what meant. My setup is now following: \- app/ -- layout.tsx -- not-found.tsx -- folder/ --- layout.tsx --- not-found.tsx --- [[...not-found]]/page.tsx
riský
like [[...not-found]]/route.ts that just does notFound() (idk if its even valid there, but it wont be streaming thats all)
Simon Knittel 🍹OP
I did your suggestion but used a page.tsx. The contains nothing except notFound(). Works good 🙂