How to prevent my app/layout from displaying header and footer on sanity studio

by

I am having this issue where my header and footer from the app are appearing on my sanity admin page, and I assume it has to do with the layout.tsx file but I cannot seemt to fix it or find solutions online. Any help would be appreciated.

    export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
        <body className={`${inter.className} overflow-x-hidden no-scrollbar`}>
          <Header />
          {children}
          <Footer />
        </body>
    </html>
  )
}

header appearing in sanity studio

  • Sorry to ask and then answer, but luckily I figured it out. shrug emoji I used pathname to find the target page(s) and conditionally render the components on the root layout. nextjs.org/docs/app/api-reference/functions/use-pathname code const pathname = usePathname(); const isSanityStudio = pathname.startsWith('/studio'); {/* Conditionally render Header if not in Sanity Studio */} {!isSanityStudio && <Header />} {children} {/* Conditionally render Footer if not in Sanity Studio */} {!isSanityStudio && <Footer />}

    – 




Leave a Comment