Nesting layout for not-found and root page
Unanswered
Capelin posted this in #help-forum
CapelinOP
I'd like to create a secondary layout for root page and not-found page.
I use the root layout for basic html, then a secondary layout for navbar like:
app / (cool-stuff).folder + layout.tsx / a-page.folder + layout.tsx / page.tsx
I would like to create a similar folder for root pages, like:
app / (root-pages).folder + layout.tsx / page.folder + not-found.folder + layout.tsx
page.folder => page.tsx
not-found.folder => page.tsx
Doing this seems to invalidate the not-found page, not redirecting to it when landing on a non-existent page.
Have I misunderstood the suggested design pattern?
If not, can we add support for this?
I use the root layout for basic html, then a secondary layout for navbar like:
app / (cool-stuff).folder + layout.tsx / a-page.folder + layout.tsx / page.tsx
I would like to create a similar folder for root pages, like:
app / (root-pages).folder + layout.tsx / page.folder + not-found.folder + layout.tsx
page.folder => page.tsx
not-found.folder => page.tsx
Doing this seems to invalidate the not-found page, not redirecting to it when landing on a non-existent page.
Have I misunderstood the suggested design pattern?
If not, can we add support for this?
27 Replies
CapelinOP
or phrased in a different way, how do i add the root layout and a secondary layout to the root page.tsx page?
CapelinOP
That's the problem, I can't get route groups to work with the root pages, like not-found and page
Ooooh
CapelinOP
In pages there was the "
Page.getLayout = function getLayout(page: React.ReactElement) "
But I can't get that work either
Page.getLayout = function getLayout(page: React.ReactElement) "
But I can't get that work either
Yeah, that's a little known issue... You can have only one root not-found page, and it will only catch 404s that happen lower down the tree
CapelinOP
I will only need one page,
but I need to nest it and use two layouts on the page
like:
app/(root_pages)/not-found/page.tsx
but I need to nest it and use two layouts on the page
like:
app/(root_pages)/not-found/page.tsx
not-found has to be a file and not a folder with page.tsx inside it. You can't do what you just describedCapelinOP
so there's no way of adding two layouts to these two pages, but you can to every other,
and, legacy support for this has been removed?
and, legacy support for this has been removed?
Support for this has not been dropped, but rather restricted to be used only with the pages router. If you're using the app router then 404s are caught by
not-found.tsx files. You can place those files wherever you want, but if you want a global 404 page then it'll have to sit at the root of your application and not inside a route group.CapelinOP
I can place the not-found page wherever I want? I'm not sure I follow
Yes, you could have a file structure that looks like this for example:
The root
app
├── not-found.tsx
├── layout.tsx
├── page.tsx
├── page_a
│ └── page.ts
├── page_b
│ └── page.ts
└── blog
├── not-found.tsx
└── [slug]
└── page.tsxThe root
not-found.tsx file will catch any 404 that happens at the root of your application like requesting https://domain.com/page_c and the other not-found.tsx will catch 404s that happen inside the /blog sub-path like https://gomain.com/blog/non_existent_pageBut you can't do this:
app
├── (root-group)
│ ├── layout.tsx
│ └── page.tsx
└── (not-found-group)
├── not-found.tsx
└── layout.tsxCapelinOP
app
├── not-found.tsx
├── layout.tsx
├── page_a
│ └── not-found.tsx
├── not-found.tsx
├── layout.tsx
├── page_a
│ └── not-found.tsx
Would that work then?
Alternatively I could re-route from the root not-found page to a /404/page.tsx that has a wrapper layout.
I don't understand why we would use multiple layouts if we can't use that design pattern throughout the app.
I don't understand why we would use multiple layouts if we can't use that design pattern throughout the app.
@Capelin app
├── not-found.tsx
├── layout.tsx
├── page_a
│ └── not-found.tsx
This is valid, and it would use the root
not-found.tsx for /app/non-existent-page and the other not-found.tsx would be used for pages under page_a like /app/page_a/non-existent-pageCapelinOP
The best I can come up with is to use the middleware to check the URL to a manual array of all my pages, and then reroute to a secondary not-found page.
But this is not ideal.
I'm quite surprised there's no support for this. I must be using a weird design pattern. Why do people normally use a secondary layout?
But this is not ideal.
I'm quite surprised there's no support for this. I must be using a weird design pattern. Why do people normally use a secondary layout?
Multiple layouts are useful if you need different UI configurations for pages at the same level. For example I might want one layout for my
/about page and a different one for /dashboard and since they're on the same level I can only do it using route groups. But the 404 page for both these pages will be the same.CapelinOP
Where would you put the navbar?
If it's common to both pages then it should go in a root
layout.tsx file like this one:app
└── layout.tsx <-- navbar goes in here
├── about
│ ├── layout.tsx
│ └── page.tsx
└── dashboard
├── layout.tsx
└── page.tsxCapelinOP
And if it's not common?
Then you place it in the layout of the specific page that needs it, like in
/app/about/layout.tsxCapelinOP
And if you needed to do this for a not-found page, you would add the different navbar in the separate sub-layouts. Then add it manually to the not-found page?
The issue is that route groups don't work the same way for
not-found.tsx. You can't have two different 404s at the same level. not-found.tsx files catch every invalid navigation that happens on a given segment, and you can't differentiate them.Give me a few minutes and I'll make you an illustration ✌ðŸ»