Sanity data returns empty array in Next.js getStaticProps

Based on your description, this is a common issue that usually comes down to a few specific causes. Here's how to troubleshoot:

Most Likely Cause: API Version and Perspective

The most common reason for this is related to your Sanity client configuration, specifically the API version and perspective settings. As of the recent API version v2025-02-19, Sanity changed the default perspective from raw to published.

When you test queries in Vision (Sanity Studio's query tool), it likely uses the raw perspective by default, which shows both draft and published documents. However, your client in Next.js might be using the published perspective, which only returns documents that have been published.

Check Your Client Configuration

Look at where you're initializing your Sanity client and verify these settings:

import { createClient } from 'next-sanity'

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01', // Use a recent date
  useCdn: false, // Set to false for getStaticProps
  perspective: 'published', // This is likely your issue
})

Quick Fixes to Try

1. Ensure Documents Are Published

Double-check in Sanity Studio that your Events documents are actually published (not just saved as drafts). Look for the green "Published" indicator in the document.

2. Try the raw Perspective

Temporarily change your client configuration to use perspective: 'raw' to see if that returns your data. This will help confirm if the issue is perspective-related:

export const client = createClient({
  // ... other config
  perspective: 'raw',
})

3. Disable CDN for Development

When using getStaticProps, set useCdn: false in your client configuration. The CDN can cache empty results during development:

useCdn: false, // Important for getStaticProps

4. Check Your Query Syntax

Make sure your GROQ query in getStaticProps matches what you're testing in Vision:

export async function getStaticProps() {
  const events = await client.fetch(`*[_type == "events"]`)
  
  console.log('Events:', events) // Add logging to debug
  
  return {
    props: {
      events
    }
  }
}

Additional Debugging Steps

1. Add console.log statements in your getStaticProps to see what's actually being returned
2. Check your project ID and dataset are correct in your environment variables
3. Verify your schema type name - if your schema is called "Events" but you're querying for "events" (lowercase), that could cause issues
4. Try fetching in the browser console using the same client configuration to isolate whether it's a Next.js-specific issue

If you're using the next-sanity toolkit, make sure you've properly configured it during setup, as it handles a lot of this configuration automatically.

The perspective issue is by far the most common culprit for this "works in Studio, empty in Next.js" problem, so start there!