Sanity SDK Network Error in Next.js Client-Side (componentDidMount)

The error you're seeing is a CORS (Cross-Origin Resource Sharing) issue, not a problem with the Sanity JavaScript SDK itself. The SDK works great with Next.js, but when you make Sanity API calls from the browser (like in componentDidMount), you need to configure CORS origins.

Why it works in getServerSideProps but not componentDidMount

• getServerSideProps runs on the server, so it bypasses browser CORS restrictions entirely
• componentDidMount runs in the browser, which enforces CORS policies and blocks requests to domains that aren't whitelisted

The Solution: Add CORS Origins

You need to whitelist your Next.js application's domain in your Sanity project settings:

1. Go to manage.sanity.io
2. Select your project
3. Navigate to Settings → API → CORS Origins
4. Click Add CORS origin
5. Add your domain with the full URL:
   • For local development: http://localhost:3000 (or whatever port you're using)
   • For production: https://yourdomain.com
6. Important: Check the "Allow credentials" box if you're using authentication tokens
7. Save the changes

You can add multiple origins (one for localhost, one for staging, one for production, etc.).

Alternative: Use API routes instead

If you prefer a server-side approach without using getServerSideProps, you can create a Next.js API route that handles the Sanity query server-side, then fetch from that endpoint in your component. This way you don't need to configure CORS at all since the Sanity client runs on your server.

The CORS configuration documentation is available at the Sanity CORS docs, and you can also manage CORS origins via the Sanity CLI with sanity cors add if you prefer the command line approach.