Nextjs components can't access env.local variables

Question

I'm building a movie recommendation app and I'm trying to fetch over an Url that is defined on my .env.local file, however it seems that none of my components can access environment variables, but index.js and _app.js can. Is there any solution?

Edit: I don't know if this matters, but both my "pages" and "components" directories are on the same folder alongside the .env.local file.

Answer 1

You must use the prefix NEXT_PUBLIC_ if you want to access env variables from the client. Please checkout the documentation for more info: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser