In Next.JS, when you add environment variables in your .env.* files whose name don't start with NEXT_PUBLIC_ , 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 NEXT_PUBLIC_ . Your file becomes : NEXT_PUBLIC_API_KEY [your value] NEXT_PUBLIC_DATABASE_URL=https://xxxxx/db/main

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