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.
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"