✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

How to fix the embedded Sanity studio in a Next.js app router version 14.

12 replies
Last updated: Mar 8, 2024
need help with embedded Sanity studio (I am using Next.js app router version 14). Meaning embedded, I was not expecting that. How can I fix that?
Mar 8, 2024, 8:27 AM
What problem are you facing? The screenshot is not exactly explanatory.
Mar 8, 2024, 8:28 AM
If you mean the fact that it doesn’t expand the full width, I guess it’s related to your layout and the maximum width. You'll need to tweak your CSS to let it spread full width.
Mar 8, 2024, 8:29 AM
Just take the studio out of your root layout
Mar 8, 2024, 8:37 AM
Mar 8, 2024, 8:37 AM

'use client'

 * This route is responsible for the built-in authoring environment using Sanity Studio.
 * All routes under your studio path is handled by this file using Next.js' catch-all routes:
 * <https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes>
 * You can learn more about the next-sanity package here:
 * <https://github.com/sanity-io/next-sanity>

import { NextStudio } from 'next-sanity/studio'
import config from '../../../sanity.config'

export default function StudioPage() {
  return (
    <div className='absolute top-0 right-0 left-0 bottom-0 w-screen'>
      <NextStudio config={config} />
Mar 8, 2024, 8:39 AM
Mar 8, 2024, 8:40 AM
make a structure like this
Mar 8, 2024, 8:40 AM
app/(site)/layout.tsx -&gt; put your logo and darkmode button hereapp/[...studio]/page.tsx
app/layout.tsx -&gt; only render children here
Mar 8, 2024, 8:41 AM
it works
Mar 8, 2024, 8:42 AM
Mar 8, 2024, 8:42 AM
user G
user F
Mar 8, 2024, 8:42 AM
ur welcome
Mar 8, 2024, 8:46 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?