Server fetch throws a missing environment variable error, what am I missing?
My client-side setup behaves correctly. The provider mounts, the hooks return content, all good. The moment I add a server-side fetchContent call it fails complaining about a missing environment variable.
Things I have already checked:
- NEXT_PUBLIC_CROCT_APP_ID is set and the client clearly reads it
- the value is the application id from the dashboard, no typo
- restarted the dev server after editing .env
So what else does the server side need that the client did not?
2 answers
The App Router provider is env-driven from NEXT_PUBLIC_CROCT_APP_ID, which is why your client side is happy. Server calls need a second variable that the client never touches: CROCT_API_KEY. Add that and the fetchContent error clears.
One catch that bites people right after: the key has to be one with the "Issue user tokens" permission. If you generate a key without it, the env var is present but server auth still fails, which looks like a different problem entirely. Create or check the key's permission in the dashboard, not just its existence. There is a whole thread on that specific failure in the API key needs the Issue user tokens permission.
That was it. I had the key set but without the token permission, so behaviour looked like a missing variable. Regenerated with the right permission and the server fetch works. Cheers both.
Adding the gotcha that got me: do not prefix the key with NEXT_PUBLIC. The app id is public and meant to be exposed to the browser, so it carries that prefix. The API key is server-only. If you name it NEXT_PUBLIC_CROCT_API_KEY you both fail to satisfy the server variable and leak a secret into the client bundle.