1

I have an .env.local with a key

NEXT__API__KEY=abcd

when I call this in the components, in my terminal show the answer in a console.log(process.env.NEXT__API__KEY); // abcd

but in the client on the browser, show me undefined.

Please, how do I solve this?

Marin
  • 141
  • 4
  • 13
  • 1
    Your env variable should start with `NEXT_PUBLIC_` if you want it to be accessible in your client. – brc-dd Dec 25 '21 at 14:53

1 Answers1

2

Replace your API key name with : NEXT_PUBLIC_ API__KEY

That is how you expose your env variables to client side.

PS: You probably do not want your API Keys in client.

Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39
  • works, Tushar, thanks! But if I don't use my API key in the client, how am I supposed to make the request to the API? using serverside props work in this case? – Marin Dec 25 '21 at 15:00
  • Yes if it is required only on initial render you can probably make the call serverside with next. Else, there is an approach where hide your actual API calls in the /api folder and expose them only to your website. One link : https://stackoverflow.com/questions/60747861/why-is-my-api-key-visible-when-using-next-js-with-environment-variables – Tushar Shahi Dec 25 '21 at 15:04