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
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
The docs mention it here: https://nextjs.org/docs/api-reference/next.config.js/environment-variables
Next.js will replace process.env.customKey with 'my-value' at build time. Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.
I just use .env instead of .env.local and it works great locally on Digitalocean or Azure (using nextjs 12)
console.log(process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE).