Issue with burger menu not appearing after deploying site on Vercel.

8 replies
Last updated: Oct 10, 2023
Hello.I have been trying to find a solution for this. I have inherited a site based on
sanity.io and nextJs. The current navigation was hardcoded and I have made the navigation on sanity using schema. Navigation appears in a burger menu. Everything is working fine in the dev. But as soon as I deploy the site on vercel, the burger menu is empty.After deploying with vercel, I am getting this Network error :
Network error while attempting to reach https://....
While there is no such error in the dev.
Thanks in advance.
AI Update

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 SettingsAPI 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.

Is the domain listed in cors origins in Sanityo.io/manage ?
Yes it is. However, when I check the vercel link from CORS origins in sanity, I see my sanity menu.But in vercel deployments from my latest commits on bitcucket, the menu is not there. I also dont see the menu when I deploy the website.
I am sorry, I am a new developer so there are a lot of things that I am still trying to figure out.
It sounds like when you deploy, your site is not longer able to connect to Sanity. There are a few reasons this happens:1. As
user S
mentioned, your CORS origins aren't properly added to sanity.io/manage .2. You're using a token and it's not properly picked up once you deploy.
Another possibility is that your navigation component is rendering before it has data from Sanity, which often doesn’t show itself in development but rears its head in production.
Hello again. Thank you for your reply. I have tried and tested, so far I believe its not CORS or token problem because this is a big website and all the other pages are rendered succesfully.I belive its problem with my component rendering. When the website runs, I get an empty Navigation array twice, and its the third time that I get navigation items in the array.
I have been playing with useEffect but still not able to solve the issue.
attaching the code snippet below.
Thanks in advance.
I have solved this issue. Thank you all for your msgs. Really helped alot. 🙏
Glad you got it sorted out!
user S
can you please tell how you solved the issue? I'm having the same right now.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?