javascript - Not-found page demands root-layout, meaning multiple root layouts not possible - Stack Overflow

admin管理员组

文章数量:1335555

Rephrased my problem: The not-found page in my app dir requires a root-layout which I added to my app dir. But now I can no longer use multiple root layouts. Below structure simply does not work. How to fix?

The not-found page can only be put here app/not-found.tsx apparently. Anywhere else it does not render, meaning it does not work putting it in app/(routes)/not-found.tsx.

app
> _ponents
> (routes)
>> about
>>> page.tsx
>> layout.tsx (= root layout for my "about" page) <<< does not work!
> not-found.tsx
> layout.tsx (= root layout actually only created here for the "not-found" page)

Rephrased my problem: The not-found page in my app dir requires a root-layout which I added to my app dir. But now I can no longer use multiple root layouts. Below structure simply does not work. How to fix?

The not-found page can only be put here app/not-found.tsx apparently. Anywhere else it does not render, meaning it does not work putting it in app/(routes)/not-found.tsx.

app
> _ponents
> (routes)
>> about
>>> page.tsx
>> layout.tsx (= root layout for my "about" page) <<< does not work!
> not-found.tsx
> layout.tsx (= root layout actually only created here for the "not-found" page)

• javascript
• reactjs
• typescript
• next.js
• next.js13

Share Improve this question Follow edited Dec 5, 2023 at 11:11 Boq7 asked Dec 4, 2023 at 15:25 Boq7Boq7 17922 silver badges1616 bronze badges 8

• Does this answer your question? – Fabio Nettis Commented Dec 4, 2023 at 15:27
• @FabioNettis - The not-found page does not render when I put it in a not-found-folder with its own root layout – Boq7 Commented Dec 4, 2023 at 15:49
• That makes sense. A not found page can be placed anywhere in your app and renders for all descendend routes. – Fabio Nettis Commented Dec 4, 2023 at 19:47
• @FabioNettis - sorry, I do not understand. I rephrased my question. I cannot have multiple root layouts when the "not-found" page forces me to create a root-layout in my app folder. – Boq7 Commented Dec 4, 2023 at 23:08
• Just read the docs properly please – Fabio Nettis Commented Dec 5, 2023 at 0:02

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

I also faced the same issue while having multiple root layouts(multiple top level route groups). Putting not-found.tsx under both layout roots didn't help. And of course putting it under app folder like app/not-found.tsx because it requires root layout which is not possible due to multiple root layouts because of multiple top level route groups.

So my current workaround is to create a catch all route in the route group that makes sense like [...not-found]/page.tsx and in that page you simply call notFound() from next/navigation. Next you need to now add not-found.tsx file to that route group. Now visiting any route that is not defined will hit that catch all route page which will call notFound() function and nextjs will render the not-found.tsx that you have defined.

Below is my folder structure currently and it is working as expected for now:

Note

• As you can see above, I have two route groups, auth and main which each has a layout file. So it is important to know that the catch all route page will take the layout based on where you choose to put your file. In my case it takes the layout of the main route group.

There is still an active github discussion on this issue if you want to follow: https://github./vercel/next.js/discussions/50034

The root app/not-found.tsx will handle both of these cases:

• if there's a notFound function thrown in a ponent
• if there's a URL mismatch (the URL accessed for the app doesn't exist)

https://nextjs/docs/app/api-reference/file-conventions/not-found

However, any nested not-found.{js,tsx} in any folders will not handle URL mismatches. They will only handle manually thrown notFound exceptions. So if you try to go to a page that doesn't exist, it will still show the global not-found page unless the page exists and you're manually calling the notFound method from nextjs.

Hope that helps and answers your question :)

本文标签：