Deploy Sanity Studio at /admin route in Next.js on Vercel - stuck on loading

The "Connecting to Sanity.io" screen you're seeing is a classic issue when deploying Sanity Studio to a subpath. This happens because the built Studio is trying to load its assets from the wrong path. Here's how to fix it:

The Core Issue

When you run sanity build, it uses Vite under the hood to bundle the Studio. Without proper configuration, the built files reference assets at the root level (/static/...) instead of your subpath (/admin/static/...).

The Solution: Configure basePath

You need to set the basePath in your sanity.cli.ts (or .js) file:

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'production'
  },
  project: {
    basePath: '/admin'  // Critical for subpath deployment!
  }
})

This tells the build process that the Studio will be served from /admin, so all asset references are generated correctly.

Next.js Configuration

Your approach with rewrites in next.config.js is correct:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/admin',
        destination: '/admin/index.html',
      },
      {
        source: '/admin/:path*',
        destination: '/admin/:path*',
      },
    ]
  }
}

Build Process

1. Run sanity build (this outputs to dist/ by default)
2. Copy the contents of dist/ to public/admin/ in your Next.js project
3. Deploy to Vercel

The built files need to be in your public directory so Next.js can serve them as static assets.

Don't Forget CORS

Add your production domain to your Sanity project's CORS settings. Go to your project → API → CORS Origins and add https://www.my-domain.com.

Better Alternative: Embedded Studio

Since you're already using Next.js, consider embedding Sanity Studio directly using the next-sanity package. This is simpler and eliminates the separate build step:

// app/admin/[[...index]]/page.tsx
import {NextStudio} from 'next-sanity/studio'
import config from '../../../sanity.config'

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

This approach:

• Runs the Studio as part of your Next.js app (no separate build needed)
• Works seamlessly with Vercel
• Automatically handles routing and asset paths
• Updates when you deploy your Next.js app

The embedded approach is generally recommended for Next.js deployments since it's more integrated and easier to maintain than managing separate static builds.