so i have my main page at “/”
I want it to have a different layout than the rest of my app.
thing is, i have some css for the html itself. i tried to add it to the div wrapping the page.tsx, or to the main/body, and it does not apply somewhy.
so this is my root layout at src/app
import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';
import Providers from './Providers';
import { Toaster } from 'sonner';
import './globals.css';
const rubik = Rubik({
weight: '500',
subsets: ['latin'],
});
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html className={`${rubik.className} bg-[#f3f4f6]`} lang="he-IL" dir="rtl">
<link rel="icon" href="/favicon.ico" sizes="any" />
<Providers>
<body>
<main>{children}</main>
<Toaster richColors closeButton />
</body>
</Providers>
</html>
);
}
and this is the layout for the “/” route, the main page.
at src/app/(root)/layout.tsx (page.tsx same group route folder)
import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';
import '../globals.css';
import { Toaster } from '@/components/ui/sonner';
import Providers from '../Providers';
const rubik = Rubik({
weight: '500',
subsets: ['latin'],
});
export default async function HomeLayout({ children }: { children: ReactNode }) {
return (
<html
className={`${rubik.className} bg-background2 text-[66.6%]`}
lang="he-IL"
dir="rtl"
>
<link rel="icon" href="/favicon.ico" sizes="any" />
<Providers>
<body>
<main>{children}</main>
<Toaster richColors closeButton />
</body>
</Providers>
</html>
);
}
so I get hydration error and the UI doesnt look good. it initialises at the rootlayout and then the html changes and I get the font-size of 66.6% so it rerenderes and doesn’t look good.
You should have only one root layout. Or one per segment. But never one in the root and one in the segment.
From the docs:
Creating multiple root layouts
To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each
route group. This is useful for partitioning an application into
sections that have a completely different UI or experience. The
and tags need to be added to each root layout.
My suggestion is that you transform the /(root)/layout into a nested layout by removing the tags html and body.
2