Using system environment variables in Vercel to set preview URL for Sanity Studio.

I've been in a similar situation! Unfortunately, there isn't a straightforward built-in way to reference Vercel's system environment variables like VERCEL_URL with a different prefix directly in Vercel's dashboard.

The Reality of Vercel System Variables

Vercel's system environment variables (VERCEL_URL, VERCEL_BRANCH_URL, etc.) are automatically available at build time, but they can't be easily "aliased" with a different prefix through Vercel's UI alone. The challenge is that Sanity Studio requires the SANITY_STUDIO_ prefix for environment variables to be accessible in your Studio code.

Working Solutions

Here are the approaches that actually work:

1. Manual Environment Variable (Simplest)

In your Vercel project settings → Environment Variables, create:

• Name: SANITY_STUDIO_VERCEL_URL
• Value: Manually copy your production domain (e.g., your-project.vercel.app)

Downside: This is static and won't automatically update for preview deployments.

2. Build Script Approach (Most Flexible)

Create a build script that reads Vercel's system variables and makes them available with the correct prefix. In your package.json:

{
  "scripts": {
    "build": "node scripts/set-env.js && sanity build",
    "dev": "sanity dev"
  }
}

Then create scripts/set-env.js:

// scripts/set-env.js
const fs = require('fs');

// Vercel system variables are available as regular env vars
const vercelUrl = process.env.VERCEL_URL;
const vercelEnv = process.env.VERCEL_ENV;

if (vercelUrl) {
  // Set it for the current process
  process.env.SANITY_STUDIO_VERCEL_URL = vercelUrl;
  process.env.SANITY_STUDIO_VERCEL_ENV = vercelEnv;
  
  // Optionally write to .env.production for the build
  const envContent = `SANITY_STUDIO_VERCEL_URL=${vercelUrl}\nSANITY_STUDIO_VERCEL_ENV=${vercelEnv}\n`;
  fs.writeFileSync('.env.production', envContent);
}

3. Use in sanity.config.ts Directly (Recommended)

Since VERCEL_URL is available at build time, you can access it directly in your config without the prefix:

// sanity.config.ts
export default defineConfig({
  // ... other config
  document: {
    productionUrl: async (prev, context) => {
      // Access Vercel's system variable directly (no SANITY_STUDIO_ needed here)
      const vercelUrl = process.env.VERCEL_URL || 'localhost:3000';
      const protocol = process.env.VERCEL_ENV === 'production' ? 'https' : 'http';
      
      return `${protocol}://${vercelUrl}/api/preview?slug=${context.document.slug?.current}`;
    }
  }
})

This is the cleanest approach - you don't need the SANITY_STUDIO_ prefix when accessing variables directly in your config file at build time. The prefix is only required for variables you want to access in your Studio's runtime code (like custom plugins or components).

Which Vercel Variable to Use

• VERCEL_URL - Current deployment URL (works for production and preview)
• VERCEL_PROJECT_PRODUCTION_URL - Always your production domain
• VERCEL_BRANCH_URL - Branch-specific URL
• VERCEL_ENV - Environment type ("production", "preview", or "development")

Remember that VERCEL_URL doesn't include the protocol, so you'll need to prepend https:// (or http:// for local development).

Summary

The third approach (accessing process.env.VERCEL_URL directly in your config) is usually the best solution since it requires no extra setup and works automatically for both production and preview deployments. You only need the SANITY_STUDIO_ prefix for variables you're accessing in React components or Studio plugins, not in the config file itself.