Learn How to Use Next.js Environment Variables and NEXT_PUBLIC

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 38

  • @quasarkid4256
    @quasarkid4256 3 года назад

    Thanks Ado nice video. Let me add one thing.. I was getting undefined when I was doing this. I stopped and restart the server and then it was working perfectly. Thanks again!

  • @jon1996xd
    @jon1996xd 3 года назад +1

    Thanks a lot, this video should be added to the next JS documentation because it's not too clear how to use these environment variables!

  • @TheLakers987654321
    @TheLakers987654321 4 года назад +7

    what if i want to use an environment variable in a component that I don't want anybody to see?

  • @samgfds1755
    @samgfds1755 2 года назад

    awesome content! I just started on a Nextjs project and this was very useful!

  • @ruggeddog3103
    @ruggeddog3103 3 года назад +1

    thanks man as always proper and complete information !

  • @bishnudas3562
    @bishnudas3562 3 года назад +2

    does variables with NEXT_PUBLIC prefix when used in frontend... are exposed to the web?

    • @ado
      @ado  3 года назад +2

      Yes. If you use NEXT_PUBLIC it makes the variable available to the browser, so you shouldn't put any information that needs to be kept secret there.

    • @skillset6239
      @skillset6239 3 месяца назад

      @@ado how can i get the env variable in browser if i expose the env variable to the browser because i am not able to find it

  • @shengpang1405
    @shengpang1405 2 года назад

    Good content, wish to see more. Great work!

  • @spastiCSpin
    @spastiCSpin Год назад

    You saved me! thanks!

  • @gabe1006
    @gabe1006 2 года назад

    Thanks for the help!

  • @Coach_Dustin_C
    @Coach_Dustin_C 2 года назад

    @2:55 Not getting loaded env variable message in terminal. Do I have to change next.config.js?

  • @0xcad
    @0xcad 3 года назад +3

    It doesn't work for me and I dont know why. I am using Next 10

  • @alirezashahmoradi7648
    @alirezashahmoradi7648 3 года назад +1

    Thanks man! It helped me a lot❤

  • @jamesa.
    @jamesa. 3 года назад

    thanks man!! really helped me!

  • @clashwithcmad
    @clashwithcmad 4 года назад +2

    Dude this was very useful!❤️

  • @trebron83
    @trebron83 4 года назад +1

    Thanks. Very useful info :)

  • @subhamshaw1726
    @subhamshaw1726 3 года назад

    this is a very easy and good video. thank u

  • @tejadaggubati
    @tejadaggubati 3 года назад

    Awesome Broh! Thanks a lot

  • @tendies
    @tendies 3 года назад

    Thank you, this helped me a lot!

  • @Ebizzill
    @Ebizzill 4 года назад +1

    dude... sup super helpful

  • @genaroibc
    @genaroibc 2 года назад

    About .env - the file for env variables in production, how is it suposed we access them for example when we deploy from Vercel if we dont push .env to the project's git repo?

  • @wisdomelue
    @wisdomelue 2 года назад

    when hosting the website in production eg netlify, would the hosting server be able to access the environmental variable? because we usually pass the variable to the servers as well. which are we going to pass? the one with NEXT_PUBLIC??

  • @joaomeira5517
    @joaomeira5517 3 года назад

    Very good man! Thx a lot!

  • @DanteMishima
    @DanteMishima 3 года назад +1

    Thank you.
    What about URLs? Would it work the same?

  • @neerajsinghtangariya2587
    @neerajsinghtangariya2587 3 года назад

    wow nice :)

  • @anuj7286
    @anuj7286 3 года назад

    thankyou so much!

  • @nishantkumar6960
    @nishantkumar6960 3 года назад

    Thanks, Aado!!

  • @Evikeuklavier
    @Evikeuklavier 3 года назад

    8:08 I think you are wrong. Any props that are passed through getServerSideProps end up in your front end source code. If you look at it and scroll all the way at the bottom you can see a script called __NEXT_DATA__ with all your props data. So your API keys are not private if you get them that way. Best to use them just through your API. Unless my understanding is wrong...

    • @ado
      @ado  3 года назад +4

      Hey Bryan. Yes and no. If you pass the data from the getServerSideProps() method as props into your react component then yes the data will be sent to the browser, but the contents of the function itself are never exposed and don’t get built as part of the browser bundle. So you can safely get the value from process.env and use it for example to make a call to a secured api, and pass that data as props to your component but not the value of the environment variable itself. Hope that helps.

    • @Evikeuklavier
      @Evikeuklavier 3 года назад

      @@ado oh that’s suuuper good to know! Thanks for those details!

  • @neerajsinghtangariya2587
    @neerajsinghtangariya2587 3 года назад

    so if i do not create .env.development does .env.local will work on production ?

  • @sidfun2shh
    @sidfun2shh 3 года назад

    Hi, can I set the apitoken in environtment variable from the login api response? thanks

  • @Nellak2011
    @Nellak2011 2 года назад +1

    Every time I do it, my env variables are always undefined.

    • @faruksardar8829
      @faruksardar8829 2 года назад

      Did you get any solution?

    • @tareekylefraser4058
      @tareekylefraser4058 Год назад

      had the same issue, just stop the build and run it again.. solved my problem.

  • @preciousadeyinka2786
    @preciousadeyinka2786 3 года назад

    Hey Ado, pretty neat stuff man, thanks.
    I"ve got a suggestion though, I think you should include a link to your other social media accounts so you're reachable, and I know the channel is pretty new, but man you're doing great, other things will follow gradually and eventually, safe bro!
    I definitely subscribed and smashed the bell too.. 😉🙏good luck!

  • @dashataranfa
    @dashataranfa 4 года назад +1

    thx