REACT_APP_API_URL is undefined in NextJS

Question

I have added a.env file to my root folder and added the below variable.

REACT_APP_API_URL=http://localhost:4000

I have used this in a component as below.

process.env.REACT_APP_API_URL

After adding the above, I have restarted the reactJS application and run the application via npm start. I see the below message in the console, but still, the variable gives an undefined value.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

info - Loaded env from D:\ReactJsProj.env

info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5

Answer 1

it seems you just want to change your port, not the whole app url. so just do this in your .env file:

PORT=4000

and then restart the dev server. it will do the job!

Answer 2

In nextjs you should add env variables in .env.locale