Sanity Navigation Empty on Vercel Deploy but Works in Dev - Network Error

This is a classic CORS (Cross-Origin Resource Sharing) issue that happens when deploying to Vercel. Your navigation works locally because localhost is likely already in your allowed CORS origins, but your Vercel domain isn't.

When you deploy to Vercel, your site gets a new domain (like yoursite.vercel.app), and Sanity blocks requests from domains that aren't explicitly allowed in your project settings. This is why you're seeing the network error when trying to fetch your navigation data.

Here's how to fix it:

1. Go to manage.sanity.io
2. Select your project
3. Navigate to Settings → API settings
4. Under CORS Origins, click Add CORS origin
5. Add your Vercel production domain (e.g., https://yoursite.vercel.app)
6. Make sure "Allow credentials" is checked if your site uses authentication

Important for Vercel preview deployments:

If you're also deploying preview branches (like yoursite-git-branch-name.vercel.app), you have two options:

• Add a wildcard origin: https://*.vercel.app (this allows all your Vercel preview deployments)
• Add each specific preview URL individually (more secure but less convenient)

After adding the origins:

The changes take effect immediately—just refresh your deployed site and your burger menu should populate with the navigation data.

This is one of the most common deployment issues with Sanity + Vercel, and once you've added your domains to the CORS origins list, everything should work exactly like it does in development. The Sanity CORS documentation has more details if you need additional configuration options.