Get help on Discord

Discussion about the root layout for a website and how to properly implement it using Next.js.

20 replies
Last updated: Apr 4, 2024
How it looks like ..

https://ibb.co/VLQD9Mr
AI Update

I can see you've shared an image link, but unfortunately I'm unable to view images directly. To help you effectively, could you describe what you're seeing or what you're asking about?

For example, if you're asking about:

  • An error message - paste the text of the error
  • How something should look in Sanity Studio - describe the feature or component
  • A code example - share the code as text
  • A UI element - describe what part of the Studio you're working with

Common things people ask about "how it looks":

If you can provide more context as text, I'll be able to give you a much more helpful answer!

You probably use the same layout for studio as for your site. You probably want to move your root layout to a nested layout for your site and then have the root layout be a empty one. https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
So your root layout could be layout.tsx with something like: 
export default function RootLayout({_children_}) {

return <>{_children_}</>

}
it only works partially, i still see my website, but when i scroll down, i see the full ui of sanity.
This is my root layout for my homepage

import "@/styles/globals.css";
import { Metadata } from "next";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import  Navbar  from "@/components/navbar";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

export const metadata: Metadata = {
	title: {
		default: siteConfig.name,
		template: `%s - ${siteConfig.name}`,
	},
	description: siteConfig.description,
	themeColor: [
		{ media: "(prefers-color-scheme: light)", color: "white" },
		{ media: "(prefers-color-scheme: dark)", color: "black" },
	],
	icons: {
		icon: "/favicon.ico",
		shortcut: "/favicon-16x16.png",
		apple: "/apple-touch-icon.png",
	},
};

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en" suppressHydrationWarning>
			<head />
			<body
				className={clsx(
					"min-h-screen bg-background font-sans antialiased",
					fontSans.variable
				)}
			>
				<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
					<div className="relative flex flex-col h-screen">
						<Navbar />
						<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
							{children}
						</main>
						<footer className="w-full flex items-center justify-center py-3">
							<Link
								isExternal
								className="flex items-center gap-1 text-current"
								href="<https://nextui-docs-v2.vercel.app?utm_source=next-app-template>"
								title="<http://nextui.org|nextui.org> homepage"
							>
								<span className="text-default-600">Powered by</span>
								<p className="text-primary">NextUI</p>
							</Link>
						</footer>
					</div>
				</Providers>
			</body>
		</html>
	);
}
What are you passing in as the {children} on your homepage?
I need this to display everything on the website. If I remove it, you can no longer see the sanity interface.The problem is still that I see the website at the top and then the sanity dashboard at the bottom
I think something like this would work:
root layout => app/_layout_.tsxyour current website
layout => app/(content)/_layout_.tsxyour studio
layout => app/studio/layout.tsx
Try just having this as root layout 
export default function RootLayout({_children_}) {

return <>{_children_}</>

}
for studio use the default
and for website use the one you pasted above
My layout.tsx currently looks like this in the /app folder.
Use nextUI for explanation


import "@/styles/globals.css";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import Navbar from "@/components/navbar";
import { Link } from "@nextui-org/link";
import clsx from "clsx";
import Head from "next/head"; // Importiere den Head-Komponenten
import Footer from "@/components/Footer";

export const metadata = {
    title: {
        default: siteConfig.name,
        template: `%s - ${siteConfig.name}`,
    },
    description: siteConfig.description,
    icons: {
        icon: "/favicon.ico",
        shortcut: "/favicon-16x16.png",
        apple: "/apple-touch-icon.png",
    },
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en" suppressHydrationWarning>
            <Head>
                <meta name="description" content={siteConfig.description} />
                {/* Hier definierst du die Theme-Farben für verschiedene Schemata */}
                <meta name="theme-color" content="white" media="(prefers-color-scheme: light)" />
                <meta name="theme-color" content="black" media="(prefers-color-scheme: dark)" />
                {/* Hier kannst du weitere Meta-Tags für Icons usw. hinzufügen */}
            </Head>
            <body
                className={clsx(
                    "min-h-screen bg-background font-sans antialiased",
                    fontSans.variable
                )}
            >
                <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
                    <div className="relative flex flex-col h-screen">
                        <Navbar />
                        <main className="container mx-auto max-w-7xl pt-16flex-grow">
                            {children}
                        </main>
                        <footer className="w-full flex items-center justify-center py-3">
                           <Footer />
                        </footer>
                    </div>
                </Providers>
            </body>
        </html>
    );
}
i used this install for my next.js website
https://nextui.org/docs/frameworks/nextjs
yeah. so thats why it wraps around studio. Since nested layouts gets injected in above layouts. So the studio layouts gets rendered in the 
{children}
you see above
And how can I isolate sanity? I would actually like to have it in my project and I've never had this problem before =(
Like i described above
if you are using app router
I'm going crazy here. And would actually hate to work without this template.
sanity admin is under /app/admin

in /admin is the layout.tsx and in
/app/admin/[[]...index] is the page.tsx
You can use Route Groups in order to have multiple root layouts. That way you can have a root layout for the Sanity Studio and another root layout for your main app. This is exactly what I did

app
├─ (main)
├─ (studio)
│  ├─ studio
│     └─ [[...slug]]
│  ├─ layout.tsx
│  └─ page.tsx

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?