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

Question

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=xx_xxxxxxxxxxxx

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)

Tushar Shahi · Accepted Answer · 2022-06-25 16:36:27Z

2

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=xx_xxxxxxxxxxxx

NEXT_PUBLIC_DATABASE_URL=https://xxxxx/db/main

answered Jun 25, 2022 at 16:36

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

6 Comments

Sai Krishnadas Over a year ago

Accessing Variables in the client browser via NEXT_PUBLIC_, will the keys be vulnerable ?

Tushar Shahi Over a year ago

Yes. The way to get around that is using your custom API Routes. A link smashingmagazine.com/2021/12/…

Sai Krishnadas Over a year ago

Just check, NEXT_PUBLIC_API_KEY also doesn't work. Show NEXT_PUBLIC_API_KEY undefined

Tushar Shahi Over a year ago

Regarding security : You do not use NEXT_PUBLIC_ but also do not directly call any API which requires the key. Instead you call your Next.js API Routes and they interact with the API using the API Key. This works because as mentioned in the answer Node.js env including the API Routes have access to keys even without NEXT_PUBLIC_.

Tushar Shahi Over a year ago

How are you accessing the key?

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related