Not-found broken with multiple root layouts

[stychu]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/blissful-fog-nflrh6

To Reproduce

1. Open sandbox and click not found page
2. It will redirect to the generic nextjs 404 page

Current vs. Expected behavior

Generic 404 Nextjs error page is shown when I navigate to any unknow urls.

I expect to be redirected to my custom 404 UI handler

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Additional context

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

According to the docs in order to be able to handle any unmatched URLs in the application we are bound to the fixed path for the not-found UI that must be placed at the root of the app -> app/not-found.js

This breaks not-found custom UI handling as per provided example.

I've 2 root layout groups https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts

1. Auth group (which is publicly accessible)
2. Main group (which is accessible if user is authenticated and basically contains the whole app routing)

With this setup and not having app root not-found file it's not possible to be able to handle 404 with custom UI as any 404 url handling is bound to the root app/not-found.tsx.
I believe this should not be bound to the fixed path but rather the top most existing not-found file and if no file exist then generic 404 should intercept. This also applies for the error.tsx I believe.

[stychu]

Seems this is same/similar issue. How come multiple root layouts can't have it's own 404/error handlers..

#54980

[stychu]

Can I get any feedback on this? It this is a bug or I do something wrong?
@huozhi you seem to have some knowledge around this topic as I saw some changes recently made for handling files in this PR #54931.

[devjiwonchoi]

Please see #55191 (comment)

[iamlinkus]

Looks like the fix commit has been reverted 15 hours ago (#64516). Is there an update when we'll get this working?

[devjiwonchoi]

No didn't get reverted, it was cuz of the CI. It's fixed now :) hope you could check it out and close this issue as well.

[iamlinkus]

Ok, checked 14.2.1 (which has that fix), and the problem outlined in the OP message still exists. It's a huge problem for people that are working with Payload CMS 3.0 (payloadcms/payload-3.0-demo#84 (comment)), which uses two adjacent group routes and the structure is the following:

We need both route groups completely separated, both having their own root layouts and their own not-found components. With how things are currently, there is no way of doing that apart from dirty workarounds. I think most people experiencing this issue expected the behavior to be able to simply add not-found.js to each group route and render in each their own error component without artificially adding root layouts or root not-founds.

[devjiwonchoi]

@iamlinkus Don't think it appended to the stable version, have you checked on canary?

[iamlinkus]

@iamlinkus Don't think it appended to the stable version, have you checked on canary?

TLDR;

With the latest cannary (14.3.0-canary.6), which includes the fix, the following structure still doesn't show the custom not-found component in the main pages.

.
└── app/
    ├── (main)/
    │   ├── layout.tsx
    │   ├── not-found.tsx // doesn't get rendered
    │   └── page.tsx
    └── (sub)/
        ├── sub/
        │   └── page.tsx
        ├── layout.tsx
        └── not-found.tsx

I can confirm that it now lets you have a not-found in the root (/app), without a root layout (RootLayout) in the root (/app), which is great. However, for my use case (and any people using Payload 3.0), who want their websites to have a custom not-found - it still doesn't solve the problem.

What we need: the ability for each group route (including a group route, regardless if it's a root (homepage), or a sub-page (/admin)) to have a custom not-found. Currently, even with your fix, if I want to have a custom not-found component for my homepage (the (app) group route from the screenshot in my previous comment), the only way I can do that is adding a not-found component to the root /app folder. This has a problem: I'm not able to use the root layout that's within my (app) group route. I was really expecting that a not-found within a group route (even though it's for the root of the website) will just work, just like a manifest.ts or not-found in other group routes that are for sub-routes works in that group route.

Also, even with that fix, next.js doesn't seem to care about the not-found component in my (app) group route. Maybe because it's for the root of the website, but inside a route group folder?

[iamlinkus]

I've created a devbox to recreate the issue.

With this file structure:

None of the not-found components are rendered. Only the generic next.js one is.

Here's the devbox.

[YYGod0120]

I've created a devbox to recreate the issue.我创建了一个开发框来重新创建该问题。

With this file structure:使用此文件结构：

None of the not-found components are rendered. Only the generic next.js one is.不会呈现任何未找到的组件。只有通用next.js一个是。

Here's the devbox. 这是开发框。

I encount this problem too