How to deploy embedded Sanity Studio and resolve ID error.

Deploying an embedded Sanity Studio in Next.js is straightforward once you understand the routing requirements. Here's how to deploy your embedded studio that's currently running at http://localhost:3000/studio:

Deployment Process

The good news is that deploying an embedded Sanity Studio works the same way as deploying any Next.js application. When you deploy your Next.js app to platforms like Vercel, Netlify, or any other hosting provider, your embedded Studio will deploy along with it automatically.

Key Requirements for Deployment

1. CORS Configuration (Critical!)

You must add your production domain to your Sanity project's CORS origins settings. This is easy to forget but essential:

• Go to your Sanity project settings (manage.sanity.io)
• Navigate to API settings
• Add your production URL (e.g., https://yourdomain.com)
• Enable "Allow credentials" for authenticated requests

Without this, your Studio won't be able to authenticate users or save content in production.

2. Routing Configuration

Your Studio needs proper routing to handle all sub-routes. According to the next-sanity documentation, if you're using the App Router, your file structure should look like:

app/studio/[[...index]]/page.tsx

This [[...index]] catch-all route ensures all Studio sub-routes (like /studio/desk/post or /studio/structure) are properly handled. Inside this file, you'll have something like:

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

export default function StudioPage() {
  return <NextStudio config={config} />
}

The embedding documentation confirms you need to ensure all sub-routes of the basePath redirect to this route.

3. Environment Variables

Make sure your production environment has the required environment variables set:

NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production

Most hosting platforms (Vercel, Netlify, etc.) have settings pages where you can add these.

4. Styling

Ensure your Studio has proper styling as mentioned in the embedding documentation:

/* Applied to the container where Studio mounts */
#app {
  height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

Example: Deploying to Vercel

1. Push your code to GitHub/GitLab/Bitbucket
2. Connect your repository to Vercel
3. Add environment variables in Vercel's project settings:
   • NEXT_PUBLIC_SANITY_PROJECT_ID
   • NEXT_PUBLIC_SANITY_DATASET
4. Deploy!

Your Studio will be available at https://yourdomain.com/studio

Example: Deploying to Netlify

Similar process:

1. Connect your repository
2. Add environment variables in Site settings → Environment variables
3. If needed, add a redirect rule in your netlify.toml:

[[redirects]]
  from = "/studio/*"
  to = "/studio"
  status = 200

Verifying Your Deployment

After deployment:

1. Visit https://yourdomain.com/studio
2. You should see the Sanity Studio login screen
3. Sign in with your Sanity account
4. Verify you can edit and save content

Alternative: Dedicated Studio Hosting

If you prefer not to embed the Studio in your Next.js app, you can also deploy it separately using:

sanity deploy

This hosts it on Sanity's infrastructure at your-project.sanity.studio. This is simpler but gives you less control over customization and integration with your frontend.

The embedded approach you're using is great for having everything in one place and gives you more flexibility for custom integrations!