Nextjs environment variables not working in js pages

Question

I am creating a nextjs website. In my js file, I am fetching API data and I am assigning the token via .env.local file. But when i tried to access .env variable that I have created, it's not returning anything. I mean, it returns empty/undefined.
My js file code:

export async function getStaticProps() {
    const response = await fetch(`https:/mywebsite.com?token=${process.env.PRAISES_TOKEN}`);
    const body = await response.json();
    console.log(body);
    
    return {
        props: {
            naats: body
        }
    }
}

.env.local

PRAISES_TOKEN=MY_TOKEN

My nextjs project version is 12.
In my git bash, it returns like this, no value of variable:

https://website.com?token=

Update: The thing i have figured out is that when i assign any token/hash to env variable, then variable returns undefined. If i assign https url then variable works fine. So, i though to assign full url with token like https://website.com?token=jhasvdiasvdjkagdg8catscuas, but it doesn't work and returns undefined. Variable only works with https url values but without parameters. This is strange.

Can someone please help me with this issue? I don't wanna expose my token/api_token to browser/public.

Have you tried logging your env outside of getstatisprops function? — PCPbiscuit
– PCPbiscuit, Commented Jan 13, 2022 at 13:30
Also, remember to restart your server whenever you change envs — PCPbiscuit
– PCPbiscuit, Commented Jan 13, 2022 at 13:31
@PCPbiscuit yes, It returns undefined in console log. I do always restart — Zain Shabir
– Zain Shabir, Commented Jan 13, 2022 at 13:33
Your code looks fine, it should work. Maybe you need to wrap value with "? Also, are you sure you are not destructuring process.env? Are you 100% using it inlined, like in your example? Or not accessing it using dynamic key stored in some variable? — Danila
– Danila, Commented Jan 13, 2022 at 14:15
@Danila Wrapping in " would be excessive and unnecessary but I agree with you this code should work. I just tried it out — PCPbiscuit
– PCPbiscuit, Commented Jan 13, 2022 at 14:18

Danila · Accepted Answer · 2022-01-13 14:32:39Z

3

Next.js will automatically expand variables $VAR inside of your .env* files, so you need to escape $ signs with \, so if you token is $abcd$ef it should look like that: PRAISES_TOKEN=\$abcd\$ef

It is also good idea to wrap value with " quotes, because tokens also usually have other symbols like = and etc:

PRAISES_TOKEN="\$abcd\$ef"

More info

edited Jan 13, 2022 at 14:32

answered Jan 13, 2022 at 14:30

Danila

19k2 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zain Shabir Over a year ago

It worked, I was only wrapping it in double quotes. Now, as you told me about escaping $ sign, it worked in this way. Thanks buddy

Collectives™ on Stack Overflow

Nextjs environment variables not working in js pages

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related