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.

Answer 1

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