Next.js 12 ( with react ): Cannot read env variables, process.env is undefined

Question

I'm using next.js 12 with a react app.

I have the following .env.local file:

NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"

I start the dev server and in the browser i do: console.log('###ENV', process.env) and i always get undefined.

In the logs i have this that confirms that the env file was readed: info - Loaded env from /Users/testdash/.env.local

But process.env is always empty

Answer 1

If you need to share your environment variables with the browser, prefix them with NEXT_PUBLIC_ and it will be accessible at runtime. All other environment variables are replaced with their values.

e.g. NEXT_PUBLIC_ALGOLIA_INDEX