Next.js Discord

Discord Forum

Problem with layouts

Unanswered
Grand Bleu de Gascogne posted this in #help-forum
Open in Discord
Grand Bleu de GascogneOP
I have a problem with layouts because if i use <html> and <body> in page where i want a different layout than a home page i have an error "You are mounting a new body component when a previous one has not first unmounted." But if i remove this tags i have two layouts on my page, home page and login page layout. I dont know how to repair this.

Login page layout:
https://sourceb.in/58yPPbbCtf

RootLayoyt:
https://sourceb.in/c0vK2KbIBw

12 Replies

Chub mackerel
are you add body to each layout?
Grand Bleu de GascogneOP
yes
Chub mackerel
you see, that's your problem
html and body tag already create in root layout
Grand Bleu de GascogneOP
But when i remove this tags i have two layouts not one.
With this tags i have:
and without
you can have multiple layout or template in your projec
Grand Bleu de GascogneOP
But i want only one
American black bear
import { ThemeProvider } from "@/components/theme-provider";
import { UserProvider } from "@/context/UserContext";

export const metadata = {
  title: "Login",
  description: "Login Page.",
};

export default function LoginLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
        <div className="login-container">
          <main>
            <UserProvider>
              <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
              >
                {children}
              </ThemeProvider>
            </UserProvider>
          </main>
        </div>
  );
}
just remove html and body tags from login page layout
you usually only want them in the root layout