Keeping Your Data Secure: Environment Variables in NextJS / React

Environment variables (.env) are THE way to keep your sensitive data like API keys secure and away from users. You define them in special .env.local files on your local machine and then define them wherever you deploy your React / NextJS project.
While you can use secure .env variables in NextJS, due to the nature of React (being client-side rendered), you can only use public environment variables in React. To interact with APIs in React, you'd make a request to a NodeJS server that contains the server-side env variables.
Hope you found this video helpful, and have fun coding your following projects!
Josh

[@codewithguillaume]

Hello Josh, I think that a lot of juniors make time to understand that sensitive informations are a very serious subject. Thanks for this efficient tutorial - please continue videos !

[@joshtriedcoding]

Cheers, they really are one of the most important beginner-concepts

[@snivels]

If you want a goldmine of a video to make, it'll be how to get runtime environment variables working (not build time) with next js and docker without them ending up inside the docker image. It seems like this is a huge issue, and has been for a while with no clear solution. Love your videos!

[@skyhappy]

What variables would only be passed in at runtime?

[@snivels]

@@skyhappy think environment urls or environment secrets to be used in api routes, you'd want them at runtime when you spin up the container so that you don't have to rebuild the image for every environment, you can just promote the same image through environments. That and you don't want secrets being written into the image, like they would be at build time.

[@skyhappy]

@@snivels do you know the solution to this

[@srinivasjoshi4693]

Your Channel will blow up soon. Thank you for amazing content 🔥

[@simonedwards7101]

Thanks for the video Josh. Being new to all this I ended up using env-cmd in the scripts of package.json to load the differences between my home office and town office. Now I just "npm run dev-ho" or "npm run dev-to". I could have just used localhost for both client and server but wanted to do something fancy and use ip addresses based on the specific locations of the offices. All a good learning exercise either way 🙂

[@peter042]

These are high quality videos, keep pushing bro, and you'll get the rewards

[@ThomasAlbuquerque]

I didn't know about NEXT_PUBLIC prefix in environment variables, thank you so much

[@clickbaitpolice9792]

Josh please reply. I want to use Firebase. I’ve set up my variables but I can’t get my config file to read them. It’s all undefined. I’ve tried putting “use server” on the top of the JS file and still nothing works

[@techwizard961]

Same here. Have you found any solutions??

[@skyhappy]

You should use supabase, it is a better version of firebase as it uses SQL to model your schema which makes life easier. Also the API is way better made as it's essentially a query builder which means it's similar to SQL.

[@davidlintin]

Make sure your .env file is at the root of your project 👍🏻

[@bsimpson888]

Hello Josh, I discovered that with the introduction of the app directory (next 13 i think ) , they changed the behavior of NEXT_PUBLIC environment variables. However it seems that only the variables specified during "build" time are available but not those specified during "runtiime" (e.g. set as env for a docker image ). It would be nice if someone ( preferably you ) could explain how to pass such "deployment" specific variables to the client side, when using next 13 or 14.

[@dmytro.nazaruk]

Hey! What’s the name of extension that shows the weight of bundles next to import command? 3:03

[@manoranjands9479]

Thanks alot for this video

[@kanodekoubillybrown3025]

My env variables are not available in production , why ?

[@JoonatanKarhu]

Hi, I'm following your tutorial and my .env.local variable won't show in console.log(process.env.variableName); I'm looking for the log value by running in vs code command line: node fileName.js I get undefined as a value Please help, I have been stuck with this for a long time.

[@arizona2233]

adding NEXT_PUBLIC in front of the variable in .env is needed to console.log

[@skyhappy]

​@@arizona2233isn't it also because he has to run it off the build generated by next build, as in the building phase the variables are inserted?

[@chelseamjames1]

great explanation!

[@saurabhdaswant7833]

very helpfull thanks!

[@EmmanuelAgyemang-d7u]

You are intelligent

[@kacperkepinski4990]

it would be better for me not to watch that