Hi all! Does anyone have problem on deoplloying on Vercel (Using Next. js as a frontend)? I have two test projects, and once deployed, they don't refresh, if i change some...

This is a common caching issue! When you deploy a Next.js site to Vercel, it serves static/cached pages by default for performance. Changes in Sanity Studio won't automatically appear on your live site because Next.js doesn't know the content has changed. CORS settings won't help here since that only controls browser-based API access.

You need to implement revalidation to tell Next.js when to fetch fresh content. Here are your options:

1. Time-Based Revalidation (Quickest Fix)

Add a revalidate option to your data fetching. In the App Router, you can set this when fetching:

const posts = await sanityFetch({
  query: POSTS_QUERY,
  revalidate: 60, // Refresh every 60 seconds
})

Or configure it at the page level:

export const revalidate = 60 // seconds

This means your pages will regenerate at most every 60 seconds (adjust based on your needs). It's simple but not instant. The ISR documentation has more details on time-based revalidation.

2. On-Demand Revalidation with Webhooks (Recommended for Production)

For instant updates when you publish content, use webhooks to trigger Next.js revalidation. This is the stable, production-ready approach:

Step 1: Create a Next.js API route (e.g., app/api/revalidate/route.ts):

import { revalidateTag } from 'next/cache'
import { type NextRequest, NextResponse } from 'next/server'
import { parseBody } from 'next-sanity/webhook'

export async function POST(req: NextRequest) {
  try {
    const { body, isValidSignature } = await parseBody(
      req,
      process.env.SANITY_REVALIDATE_SECRET
    )
    
    if (!isValidSignature) {
      return new Response('Invalid signature', { status: 401 })
    }

    if (!body?._type) {
      return new Response('Bad Request', { status: 400 })
    }

    // Revalidate specific tags or paths
    revalidateTag(body._type)
    
    return NextResponse.json({ revalidated: true, now: Date.now() })
  } catch (err) {
    return new Response('Internal Server Error', { status: 500 })
  }
}

Step 2: In your Sanity project dashboard → API → Webhooks:

• Add your Vercel URL: https://your-site.vercel.app/api/revalidate
• Set a secret and add it to your Vercel environment variables as SANITY_REVALIDATE_SECRET
• Configure it to trigger on document publish/update events

This approach gives you instant updates whenever content changes in Sanity Studio. Check out how to set up webhooks for on-demand ISR for more guidance.

3. Sanity Functions (Experimental Alternative)

Sanity Functions are a newer option that runs serverless code directly on Sanity's infrastructure when content changes. They can trigger Next.js revalidation without needing external hosting.

Important: Functions are currently marked as experimental with APIs subject to change, so webhooks are the more stable choice for production sites. However, Functions can be useful for testing or if you want to explore newer capabilities.

Important: Disable Sanity CDN During Revalidation

When using ISR, set useCdn: false in your Sanity client configuration to avoid serving stale cached data:

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false, // Important for ISR
})

The Sanity CDN and Next.js ISR can work against each other, so it's best to let Next.js handle the caching when using revalidation.

Try adding time-based revalidation first to confirm it works, then implement webhooks for instant updates!