How i can use multiples layouts

Answered

Barbary Lion posted this in #help-forum

Barbary LionOP

2024-11-01T20:54:07.210Z

Im wanna building a different layout for login page, but im receive a message error: Hydration failed because the initial UI does not match what was rendered on the server.

Answered by B33fb0n3

you can create multiple root layouts [by doing this](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts):
(see attached - or click link).
And then add inside each layout your own layouts:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}

View full answer

7 Replies

B33fb0n3

2024-11-01T20:57:19.513Z

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}