getInitialProps XMLHttpRequest error on client-side fetching (but not server-side fetching)

[abzr1]

Meta

Next.js version	Node.js version	Browser	Operation system	Application deployed
latest	v14.15.0	Chrome	Windows	next start

Bug Description

I have a Next.js blog which connects to Sanity using getInitialProps, via this guide by Sanity.

I have a next/link client-side transition link with links from the blog post page to tags (post category) pages. When I click on the link, I get the following error:

Unhandled Runtime Error

Error: Network error while attempting to reach https://[...].apicdn.sanity.io/v1/data/query/production?query=[...]

Call Stack

XMLHttpRequest.onError

file:///C:/Users/aryan/Desktop/[...]/[slug].js (3664:15)

The pages load fine if I use a serverside transition with a standard <a> tag.

I'm not sure if this is a Sanity bug or a Next.js bug.

[abzr1]

http://localhost:3000 had to be added as a Sanity studio CORS origin from the Sanity teams dashboard