Environmental Variables not working even though it is defined in .env.local file?

In Next.JS, when you add environment variables in your .env.* files whose name don't start with NEXTPUBLIC , they are only available to the Node.Js environment. So you can access them in API Routes and data fetching methods like GetServerSideProps etc. If you want to access variables in client browser you have to append NEXTPUBLIC . Your file becomes : NEXTPUBLICAPIKEY [your value] NEXTPUBLICDATABASEURL=https://xxxxx/db/main

Context: I have defined my keys in .env.local but still while calling it process.env.APIKEY it doesn't work as expected. APIKEY [your value] DATABASEURL=https://xxxxx/db/main Code: export const xata = new BaseClient({ apiKey - process.env.APIKEY, databaseURL: process.env.DATABASE_URL }); Folder Structure: Project - pages - public - .env.local - helper (file that needs api key)

Source: I have defined my keys in .env.local but still while calling it process.env.APIKEY it doesn't work as expected. APIKEY [your value] DATABASEURL=https://xxxxx/db/main Code: export const xata = new BaseClient({ apiKey - process.env.APIKEY, databaseURL: process.env.DATABASE_URL }); Folder Structure: Project - pages - public - .env.local - helper (file that needs api key)

Verified resolution: In Next.JS, when you add environment variables in your .env.* files whose name don't start with NEXTPUBLIC , they are only available to the Node.Js environment. So you can access them in API Routes and data fetching methods like GetServerSideProps etc. If you want to access variables in client browser you have to append NEXTPUBLIC . Your file becomes : NEXTPUBLICAPIKEY [your value] NEXTPUBLICDATABASEURL=https://xxxxx/db/main

Source URL: https://stackoverflow.com/questions/72754832/environmental-variables-not-working-even-though-it-is-defined-in-env-local-file