The root layout is a Server Component by default and can not be set to a Client Component.
Migrating from the pages directory: The root layout replaces the _app.js and _document.js files. View the migration guide.
Nesting Layouts
Layouts defined inside a folder (e.g. app/dashboard/layout.js) apply to specific route segments (e.g. acme.com/dashboard) and render when those segments are active. By default, layouts in the file hierarchy are nested, which means they wrap child layouts via their children prop.
app/dashboard/layout.tsx export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}
Good to know:
Only the root layout can contain <html> and <body> tags.