How to pass env variable to client side in a nx workspace?

Question

I'm running a nextJS app in a NX workspace and I need to get access to env variables on client side.

/apps/myproject/.local.env

NEXT_PUBLIC_PROJECT=my-super-project

/apps/myproject/next.config.tsx

module.exports = {
  publicRuntimeConfig: {
    PROJECT: process.env.NEXT_PUBLIC_PROJECT
  }
}

In my nextJS app I'm trying several things:

/apps/myproject/pages/_app.tsx

import nextConfig from 'next/config'
const { publicRuntimeConfig } = nextConfig()
// ...
console.log(process, publicRuntimeConfig)

Running the app via nx serve myproject does not give me any output on client, but on server side I do see the NEXT_PUBLIC_PROJECT value. I'm not quite sure if my next.config.js file is read by nx at all...

Answer 1

For anyone who is still having this issue.
For loading the env variables in react project, followings are required:

1. Create a .env file at application level.
   Example: apps/myReactApp/.env
2. Add the variable ther with prefix NX
   Example: If you can variable called "APP_NAME", then add "NX_APP_NAME" in it. NX loads only those variables which are prefixed with "NX".

If you want to load different env files for different configuration, then you can do it like this:

For QA: `npx env-cmd -f apps/web-client/.env.qa nx run web-client:build:qa`,  
For staging: `npx env-cmd -f apps/web-client/.env.staging nx run web-client:build:staging`, 
NOTE: you need to install env-cmd package 

More about loading environment variable in their doc.