Next.js Discord

Discord Forum

public env on client after page refresh only (deployed)

Unanswered
Sweat bee posted this in #help-forum
Open in Discord
Avatar
Sweat beeOP
hey, I have a weird issue... I have a public env var I need to expose on the client. So I used the NEXTPUBLIC Prefix for the var like NEXT_PUBLIC_FOO=bar. In my client component I get the var:

const indexName = process.env.NEXT_PUBLIC_FOO || '';


Then I pass it to a data field on a div container

<div data-index={indexName}>


That works just fine locally on my dev computer! However when it is deployed to staging on GCP it does not work when I navigate to it! Its empty! It only works if I am on the page and reload it! Any ideas?

9 Replies

Avatar
Sweat beeOP
I am logging out the env on the client side and its undefined there... I think it only works before hydration on the server side that why its set on page reload... but on client side navigation its undefined
Avatar
do you have the same env variables in your hosting platform?
Avatar
Sweat beeOP
yes
I figured out two potential issues:
1. the value has spaces and special chars, so first step is to remove them... should not be an issue if they are in quotes but in GCP I dont know how it is handled, if they auto quote them or not, so I go the save way
2. I dont know much about buildtime and runtime, but it could be one issue too. The app is in a docker container and gets the env var at buildtime. But I am not sure if that is enough, does the client need the var on runtime, too? Or is it only important to set runtime env if the value would change after build? Thats not the case, the value stays like that!
I just don't know why my dev server would behave so differently to the production one...
Avatar
Sweat beeOP
still having this issue, someone having an idea?
I changed the value be a simple string... but that did not help
I log the variable and I get it on the server but not on the client
being on my local dev environment I get it on server and client