The current folder structure is like this:
I want to use a different layout only on the register page.
According to the official document, if you want to apply different multiple layouts, you need to create layout.tsx for each page.
So I'm trying to apply it like that
You are mounting a new body ponent when a previous one has not first unmounted. It is an error to render more than one body ponent at a time and attributes and children of these ponents will likely fail in unpredictable ways. Please only render a single instance of and if you need to mount a new one, ensure any previous ones have unmounted first. at body
with this error
Hydration failed because the initial UI does not match what was rendered on the server.
This error appears.
After searching, it was said that the body and html should not overlap, so I changed the code in the layout.tsx folder in the register folder like this
import "../globals.css";
import ContentCard from "@/ponents/Card/ContentCard";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return <ContentCard>{children}</ContentCard>;
}
This brings up the header ponent in the main layout.tsx.
It wasn't even loaded from register layout.tsx.
How should I solve it?
Looking at the official documentation, no matter how much I change these settings, it doesn't apply. help..
The current folder structure is like this:
I want to use a different layout only on the register page.
According to the official document, if you want to apply different multiple layouts, you need to create layout.tsx for each page.
So I'm trying to apply it like that
You are mounting a new body ponent when a previous one has not first unmounted. It is an error to render more than one body ponent at a time and attributes and children of these ponents will likely fail in unpredictable ways. Please only render a single instance of and if you need to mount a new one, ensure any previous ones have unmounted first. at body
with this error
Hydration failed because the initial UI does not match what was rendered on the server.
This error appears.
After searching, it was said that the body and html should not overlap, so I changed the code in the layout.tsx folder in the register folder like this
import "../globals.css";
import ContentCard from "@/ponents/Card/ContentCard";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return <ContentCard>{children}</ContentCard>;
}
This brings up the header ponent in the main layout.tsx.
It wasn't even loaded from register layout.tsx.
How should I solve it?
Looking at the official documentation, no matter how much I change these settings, it doesn't apply. help..
Share Improve this question asked Jul 15, 2023 at 10:24 gndy Brgndy Br 1213 silver badges10 bronze badges2 Answers
Reset to default 2In Next.js 13 app directory, a root layout is required and shared among all the children pages. So if you create a layout.tsx inside app dir that count as a root layout and root layout should contain html and body tag. and then if you create page level layout.tsx then it will be nested layout and will be shared across all pages in that segment. So root layout will always there as parent.
Now in your case I think you want multiple root layout.So, you need to group routes. I think next doc has nice visualization to understand how route grouping works. See here: https://nextjs/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
So you need to group your route to show diff root layout. Don't forget to include html and body tag in your root layout(in your case maybe two different root layout).
For reference
- https://nextjs/docs/app/building-your-application/routing/pages-and-layouts#layouts
- https://nextjs/docs/app/building-your-application/routing/route-groups
It has simple solution. Just use <html> and <body> tags in your RootLayout. But don't use <html> and <body> tags in your nested layouts.
So, your app/layout.tsx should be like this:
import "../globals.css";
import ContentCard from "@/ponents/Card/ContentCard";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return
<html>
< body >
<ContentCard />
{children}
</body>
</html>
}