#make a new page with new layout

18 messages · Page 1 of 1 (latest)

sour gazelle
#

i want to make a new page with new layout different than rootlayout. So i create file name layout.tsx. But when i run my project, it's still have rootlayout footer in my new page. It's also have error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <body>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

and error

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Please tell me how to fix it.

dusk scarab
#

That’s likely the problem you are facing

sour gazelle
#

but i want to make new layout

#

it's duplicate header

dusk scarab
#

Only the root layout can have <html> and <body>, that’s a hard rule you need to follow

#

But you can add normal things inside <body> to any layouts normally

sour gazelle
sour gazelle
dusk scarab
#

Except perhaps head.tsx which has been deprecated

#

But it’s irrelevant to the issue

sour gazelle
#

so i want to my folder administrator have the different layout than rootlayout

dusk scarab
#

Use route groups

#

And 3 layout files

#

app/layout
app/(non-admin)/layout
app/administrator/layout

sour gazelle
#

sorry app/(admin)/layout or app/admin/layout