Next.js Discord

Discord Forum

not-found.tsx is not reachable

Answered
Yellow and black potter wasp posted this in #help-forum
Open in Discord
Yellow and black potter waspOP
I am using the latest NextJS and PayloadCMS versions. I created my own not-found.tsx in the (frontend) folder as the PayloadCMS did in their starter template. but for some reason the not found page appears to be the default NextJS found page.
Specifically when I go to something randon like http://localhost:3000/lalala
Answered by joulev
it has to be app/not-found.tsx, not app/(frontend)/not-found.tsx

only the root not-found works as the global 404. other not-found files can only be triggered by notFound()
View full answer

6 Replies

Giant Angora
hi @Yellow and black potter wasp
if you call notFound() in layout.tsx then nextjs will look for not-found page in parent route. if you cann notFount() in page then nextjs will look for it in same route
Answer
Yellow and black potter waspOP
Ah that makes a lot of sense. I'll keep that in mind.
@joulev it has to be app/not-found.tsx, not app/(frontend)/not-found.tsx only the root not-found works as the global 404. other not-found files can only be triggered by notFound()
Sloth bear
this doesn't work with payload CMS as their structure is defined as such:
app/
  (app)/layout.tsx
  (payload)/layout.tsx

and if we were to insert a layout.tsx directly under the app/ directory, it would break payload's layout.

are you aware of any workarounds?
@Sloth bear this doesn't work with payload CMS as their structure is defined as such: app/ (app)/layout.tsx (payload)/layout.tsx and if we were to insert a `layout.tsx` directly under the `app/` directory, it would break payload's layout. are you aware of any workarounds?
joulev
app/not-found.tsx still works with that structure. Just need to add an empty app/layout.tsx (without any html/body elements) and ensure the not-found.tsx has html/body elements