"Not-found.tsx" file not working in "src/app/(app)" folder

[dmvdven]

Link to reproduction

No response

Payload Version

3.0.0-beta.32

Node Version

20.13.1

Next.js Version

14.3.0-canary.37

Describe the Bug

Hi,

I tried adding a "not-found.tsx" file inside my "src/app/(app)" folder, but this doesn't seem to work. It still shows me the default 404 NextJS page.

Am I missing something or putting the file in the wrong directory?

Reproduction Steps

Put a "not-found.tsx" file in the "src/app/(app)" folder.

Adapters and Plugins

No response

[domenico-ruggiano]

this is a problem related to next.js multi layout: https://github.com/vercel/next.js/discussions/50034

[jacobsfletch]

Hey @dmvdven I went ahead and tested this just now and @domenico-ruggiano is right in that this is a Next.js issue. There is, however, a workaround posted in that discussion which worked for me as a temporary solution.

From victorandree:

You can add a dynamic catch-all route to catch all and in this route you can call notFound. This triggers the closest not-found.tsx.

app
├── (app1)
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (app2)
   ├── admin
   │   └── page.tsx
   └── layout.tsx

In (app1)/[...not-found]/page.tsx:

import { notFound } from 'next/navigation';

export default function NotFoundDummy() {
 notFound();
}

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.