How to add Environment Variables in Next.JS | Using dot-files(.env) and next.config.js

In this video, we will see how environment variables can be added/used in Next. applications.

Important links:

Chapters:
0:00 Intro
0:27 Environment variables in Next.JS
3:18 NEXT_PUBLIC_
6:55 Env Variable Interpolation using $VAR
8:56 Development and production dotfiles

[danieltan]

I had been struggling to understand why my .env variables have been printing "undefined" for a while now which had set me back on my project. Thanks to your explanation, I now understand that its because Nextjs won't render the .env variable in the client side but only to the server side. Thank you so much!

[mohdsahil]

Thanks! great content! I have a request. Please use the latest version of Nextjs and any other package you use like apollo, or RTK

[nikhiljain]

the best video for env on nextJS but still it does not work for me specifically for priority points like running on the development server still m getting value from the .env file rather than .env.development. can you please help me with this?

[nihalpadwal]

Hey Mayank, loved the video i just had one thing to ask you, you see i made a website using next and getServerSideprops and deployed to netlify but whenever i open the link it gives me 500 internal server error. i have other pages where i havent used server side props and in that same website and when i navigate to those pages using url those pages works fine, only pages where i use server side props give 500 internal server error
hope you see this and waiting for a solution :)

[coffebite]

Hi Mayank, Great Content bro, it helped me in knowing which command to run the app in prod env. i was struggling to find out this from past two hours.
also can you tell which command to run the app in staging/test env.
basically i want to know how to set the app to read .env.test

for ex:
if we "yarn dev", it is taking .env.local
if we run "yarn start", it is taking .env.production
what is it for .env.test??