NextJS — accessing environment variable

I tried to add the environment variable and accessed from both client and server side inNextJS app.

Experiment

This is the client side testing in chrome tool.

All name in works

Only the NEXT_PUBLIC_MY_KEY work (name starting with NEXT_PUBLIC_ )

From stack overflow

Conclusion

1. process.env[key]

• work on server side getServerSideProps
• not work on client side

2. env variable

• starting with NEXT_PUBLIC_ will work out of the box
• we need some other setup in next.config.js for other env variable to work

Reference

Basic Features: Environment Variables | Next.js

Can't access process.env values using dynamic keys

Dynamic access of environment variables in NextJS not working