How to setup Environment Variables with Next.js

I was working on one of my project made with next js and graphQl, and I was in need of a setup environment variable in next js so I have googled it and doesn’t found a proper solution for it and wasted my time surfing for it, so I thought to write a blog for it so you don’t have to waste your time

we can set up two types of env in nextjs one is client-side that can be accessed on the client and one is server-side that is only accessible in server and not in client side

1.ENV for client-side

Since Next.js 9.4, Next.js will make all environment variables that start with NEXT_PUBLIC_ available to the client without any further


you can access NEXT_PUBLIC_API in client-side and use it for API URL

2. ENV for server-side


if you write simply env as you do in node js then it will be only available on server side if you console this env then in the browser you will see undefined but in a terminal, you can see env variable because it server-side rendering

Thanks for reading