ERR_INVALID_URL when deploying Next.js project that use Hygraph Content API stored in environment variable

[naufalHaidar12342]

Link to the code that reproduces this issue

https://github.com/naufalHaidar12342/hygraph-nextjs14-test

To Reproduce

1. Push project to GitHub using Git
2. Connect GitHub repo to Vercel
3. Add environment variable in Vercel that holds Hygraph Content API endpoint
4. Add environment variable in Vercel that holds Hygraph Permanent Authentication Token
5. Build/Deploy project in Vercel
6. An ERR_INVALID_URL will be thrown by Vercel if the Hygraph Content API only stored in environment variable

Current vs. Expected behavior

Current behavior:

• Next.js project will failed to build and throws ERR_INVALID_URL if the Hygraph Content API only stored in environment variable
• Next.js project could be built successfully IF there is a fallback API. This fallback API is just a variable in javascript, exported, that contains the identical Hygraph Content API
• Hygraph Permanent Authentication Token somehow able to be parsed by Vercel during deployment

Expected behavior:

• Next.js project should be able to read environment variable that contains/hold Hygraph Content API (Hygraph High Performance Content API)

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32672
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Upstream

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

This issues has been happening since Next.js 13 App Router. I only use stable version of Next.js for all of my projects. After discussion with both Vercel team and Hygraph team, one of Vercel staff suggest me to open this issues. You can find my discussion on Vercel Community here:

ERR_INVALID_URL on Hygraph Public API stored in environment variable

ERR_INVALID_URL on Hygraph Content API

For my discussion with Hygraph team, I even conducted a simple test where I will create new nextjs project (nextjs 14, accesible through the repo link) and one of Hygraph team member will do the same. We share the API and the auth token to verify that this issue does persist in other user, specifically when the next.js project being deployed to Vercel. If the same project being run locally, there is no issue with the environment variable