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

If you want to access some env variable in the client side, you need to prefix it with NEXT_PUBLIC. Next Docs — Junaid Faryad
– Junaid Faryad, Commented Oct 9, 2021 at 19:35

pedram afra · Accepted Answer · 2021-10-09 20:00:49Z

2

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!

answered Oct 9, 2021 at 20:00

pedram afra

1,2221 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BeHappy · Accepted Answer · 2021-10-09 19:35:57Z

0

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

answered Oct 9, 2021 at 19:35

BeHappy

4,0265 gold badges30 silver badges67 bronze badges

Collectives™ on Stack Overflow

REACT_APP_API_URL is undefined in NextJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related