How do I Deploy Sanity and Next.js (to Vercel) when they Live in a Top Level Folder Side by Side?

When deploying a monorepo with Sanity Studio and Next.js in separate folders to Vercel, you'll need to configure each project individually. Here's how to handle your structure:

Deploying the Structure

For your setup:

my-project/
  ├── studio/
  └── web/

You'll create two separate Vercel projects, each pointing to the same GitHub repository.

Studio Deployment

1. Set Root Directory: In Vercel project settings, set the Root Directory to studio

2. Add vercel.json in your studio folder:

   {
     "version": 2,
     "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
   }

   This configures the SPA fallback so all routes work correctly.

3. Update package.json build script:

   {
     "scripts": {
       "build": "sanity build"
     }
   }

4. Install Sanity CLI as dependency: Add @sanity/cli to your package.json devDependencies (not globally). This was the key fix that solved deployment issues.

5. Output Directory: Set to dist (Sanity's default build output)

6. Add CORS: After deploying, run:

   sanity cors add https://your-studio-url.vercel.app --credentials

Next.js (Web) Deployment

1. Set Root Directory: In a separate Vercel project, set Root Directory to web
2. Vercel will auto-detect Next.js and configure build settings
3. Add your Sanity project ID and dataset as environment variables

Important Notes

• Two Vercel Projects: You need separate Vercel projects for studio and web, both connected to the same repo but with different root directories
• Build Command Location: Make sure dependencies are installed in the correct subfolder, not at the monorepo root
• The Turbo Start Sanity template demonstrates this exact pattern with a working monorepo structure

This approach works well for learning and smaller projects. For production monorepos, consider using tools like Turborepo for better dependency management and build caching.