Sanity v2 Preview Not Working with Next.js in Separate Repositories

I can see you're trying to set up preview functionality with Sanity Studio and Next.js in separate repositories, following the nextjs-live-preview guide and the preview-content-on-site docs.

First, let me clarify something important: both guides you're following are for Sanity Studio v3 with the Presentation tool. When you mentioned "using v2 in sanity studio," I want to make sure we're on the same page about your actual Studio version.

Check Your Studio Version

Run this command in your Studio repository to confirm which version you have:

npm list sanity

If you see sanity@2.x.x, you have Studio v2. If you see sanity@3.x.x or higher, you have Studio v3.

Studio v2 does not have the Presentation tool that those guides describe. The Visual Editing workflow with real-time preview, click-to-edit overlays, and the embedded iframe preview requires Studio v3.

If You Have Studio v3

Since you can't see preview content locally, here are the most common issues with separate repository setups:

1. CORS Configuration

With Studio and Next.js on different ports/domains, you need to configure CORS:

• Go to manage.sanity.io
• Select your project → API tab
• Under CORS Origins, add your local Next.js URL (e.g., http://localhost:3000)
• Enable "Allow credentials"

2. Draft Mode Not Activating

The Presentation tool needs to activate draft mode in your Next.js app. Check:

In your Studio's sanity.config.ts:

import { presentationTool } from 'sanity/presentation'

export default defineConfig({
  // ... other config
  plugins: [
    presentationTool({
      previewUrl: {
        draftMode: {
          enable: '/api/draft', // This should match your Next.js API route
        },
      },
    }),
  ],
})

In your Next.js app, you need an API route (e.g., /pages/api/draft.ts for Pages Router):

import { validatePreviewUrl } from '@sanity/preview-url-secret'
import type { NextApiRequest, NextApiResponse } from 'next'
import { createClient } from 'next-sanity'

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
  apiVersion: '2024-01-01',
  useCdn: false,
  token: process.env.SANITY_API_READ_TOKEN!,
})

export default async function handle(req: NextApiRequest, res: NextApiResponse) {
  const { isValid, redirectTo = '/' } = await validatePreviewUrl(client, req.url!)
  
  if (!isValid) {
    return res.status(401).send('Invalid secret')
  }
  
  res.setDraftMode({ enable: true })
  res.writeHead(307, { Location: redirectTo })
  res.end()
}

3. Missing Token

You need a viewer token for stega encoding to work:

• Create a token with Viewer permissions in your project settings
• Add it to your .env.local file as SANITY_API_READ_TOKEN
• Configure your Sanity client to use it when draft mode is active

4. Client Configuration

Your Sanity client needs to be configured for preview with the previewDrafts perspective and stega encoding:

import { createClient } from '@sanity/client'

export function getClient(previewToken?: string) {
  return createClient({
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
    apiVersion: '2024-01-01',
    useCdn: !previewToken,
    perspective: previewToken ? 'previewDrafts' : 'published',
    stega: {
      enabled: previewToken ? true : false,
      studioUrl: 'http://localhost:3333', // Your Studio URL
    },
    token: previewToken,
  })
}

5. Live Query Setup

You need to use useLiveQuery from next-sanity/preview to see real-time updates:

import { useLiveQuery } from 'next-sanity/preview'

export default function PostPreview({ post, params }) {
  const [data] = useLiveQuery(post, POST_QUERY, params)
  return <Post post={data} />
}

If You Have Studio v2

If you confirmed you have Studio v2, you'll need to upgrade to Studio v3 to use those guides. Follow the Studio v3 migration guide. Studio v2 is in maintenance mode and the modern Visual Editing features simply don't exist in v2.

Debugging Steps

Without seeing the video you mentioned, here's how to diagnose the issue:

1. Check the browser console in both Studio and Next.js for errors
2. Verify draft mode is active - add a banner in your Next.js app that shows when draft mode is enabled
3. Check Network tab - when you open Presentation, does it successfully call your /api/draft route?
4. Test the preview URL directly - try visiting http://localhost:3000/api/draft?slug=/your-page manually

The most common issue with separate repositories is the draft mode not activating due to CORS, missing tokens, or incorrect API route configuration.

If you can share specific error messages from your console or clarify your Studio version, I can provide more targeted help!