javascript - I keep having issues with setting multiple layouts in Next.js 13 - Stack Overflow

admin管理员组

文章数量:1431435

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..

• javascript
• next.js
• layout
• next.js13

Share Improve this question Follow asked Jul 15, 2023 at 10:24 gndy Brgndy Br 12133 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

In 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

1. https://nextjs/docs/app/building-your-application/routing/pages-and-layouts#layouts
2. 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>
    }

本文标签： javascriptI keep having issues with setting multiple layouts in Nextjs 13Stack Overflow