#Nested not-found.tsx not working

14 messages · Page 1 of 1 (latest)

sleek wasp
#

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?
south agateBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hearty sierra
# sleek wasp I'm having trouble with a nested `not-found.tsx`. Imagine following directory st...

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

sleek wasp
#

oh

#

I've read that page up and down multiple times but never catched that point.
Thanks for pointing that out!

hearty sierra
#

i have seen some fix/work arround this by making optional matchall thats purpose is to call not found lol

hearty sierra
sleek wasp
#

Yeah, I've also seen these workarounds but they had some slight other issues so I didn't try those

south agateBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1222529886808178740 message)

sleek wasp
#

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

hearty sierra
#

i wonder if you can use catch all with route.ts

sleek wasp
#

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

hearty sierra