Variáveis de ambiente | Next.js

fala Mestres beleza no vídeo de hoje nós vamos dar uma olhada aqui nas variáveis de ambiente no next entender um pouco as diferenças de como que a gente consegue isolar as variáveis dependendo aí de onde o código vai rodar né seja no servidor ou no Browser né no cliente a gente vai brincar um pouco com esses valores e ver aí os exemplos disso tudo funcionando tá então antes da gente ir pro vídeo Eu gostaria de pedir que você se inscreva aí no canal deixa o like no vídeo deixa um comentário também acompanha a gente nas

redes sociais os links estão todos aí na descrição meu nome é jancer sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo bom então eu tô aqui com o projeto o nosso famoso projeto que a gente vem usando aí em todas as aulas e e e aqui não vai ser diferente né Eh eu vou iniciar criando uma variável aqui um arquivo na raiz do projeto chamado ponto env tá esse arquivo na raiz do projeto onde a gente vai armazenar as nossas variáveis de ambiente então eu posso armazenar aqui por exemplo uma API

aqui api aqui que vai ser alguma coisa colocar aqui menús certo e eu posso ter também uma vamos P um base URL http barra barra 3000 certo então com essas duas variáveis de ambiente o nosso servidor ele tá rodando ele detectou alteração né no ponto recarregou então se eu vier aqui por exemplo na minha tela home né seria aqui a nossa componente Inicial né o Hello from home screen que é essa mesma que nós estamos carregando aqui antes de retornar eu vou fazer o seguinte ó console. log nossa process.env né pronto o base URL foi

o Que Nós criamos base URL e eu vou ter também a II ke né se eu salvo isso aqui a gente pode ver que ele vai printar no console do Servidor né as nossa os valores dessas variáveis e se eu vier aqui no navegador inspecionar e a gente olhar o console não vai ter log nenhum certo por quê Porque essas variáveis que eu criei as variáveis de ambiente elas estão no ambiente do servidor do lado do servidor né então o cliente aqui o frontend ele não Conhece essas variáveis e a gente pode imaginar o seguinte

essa nossa função home né que seria a componente home ela é também uma server components né que é o padrão Aí do Next então no next nós temos o basicamente o que tá acontecendo aqui é que essa componente inteira ela tá sendo montada do lado do servidor então no lado quando ela vem aqui pro cliente ela já vem montada né então esse console log aqui ele nem vai ser executado porque o o HTML já vem pronto né Nós não temos a execução da função home para poder retornar e montar esse meu HTML ele é executado

no servidor o retorno que é o HTML ele manda pro cliente que é o que vai ser exibido Então essas variáveis elas estão isoladas do cliente a gente pode usar ela elas aqui do lado dentro da componente né Sem problema nenhum porque elas não vão ser expostas pro nosso frontend então agora a gente vai ver aqui um outro o outro ponto de vista né que seria com a client components e nós temos aqui em profile né a nossa tela de perfil ela é uma tela que é uma um client component né uma componente que é

montada no lado do cliente então eu vou fazer o seguinte eu vou pegar esses consoles log e vou mandar aqui ó pra nossa componente a nossa função né profile que retorna O HTML aqui do perfil Então antes de retornar eu vou colocar aqui ó console log e vou salvar então quando eu faço isso eu tenho que vir aqui na minha aplicação né no Browser e vou Navegar pra Barra profile que é aquela componente que eu criei e a gente pode ver que tem a gente teve vários logs aqui de undefined né então o que são

esses logs né são basicamente o o as nossas variáveis de ambiente só que veio tudo undefined aqui pro nosso browser né o browser ele não Conhece essas variáveis por mais que nós estamos acessando elas dentro do dentro da componente né uma componente do cliente então por mais que eu definir que a componente é do cliente que essas esse código vai ser todo executado lá no cliente que seria no navegador e o Next ele não envia as minhas variáveis de ambiente pro cliente a menos que eu indique né E como que eu indico que uma variável

ela tem que ser enviada e pro cliente eu indico isso aqui no nome da variável então aqui no meu arquivo pon env eu colocaria um PR fixo que seria next underline Public né underline então com esse prefixo aqui todas as variáveis que tiverem esse prefixo Elas serão enviadas pro cliente para pro cliente usar né então quando eu salvo isso aqui ele compilou novamente nós estamos aqui na nossa página perfil na nossa é na nossa página de perfil e aqui eu vou fazer o console log não é mais base URL né é next Public base URL

e com esse console log quando eu salvo a gente pode olhar aqui e ver ó local host 3000 ele logou duas vezes por conta né Nós estamos em em ambiente de desenvolvimento né o strict mode react ele vai ficar executando ali as nossas componentes vezes repetidos para fazer verificações dos hooks se tá tudo certinho mas o fato é que a nossa variável foi enviada tá então quando eu prefixe né con next Public eu transformei essa variável em um variável pública tá então a gente consegue configurar e controlar as nossas variáveis de ambiente se Elas serão

privadas do Servidor ou se Elas serão públicas e pro cliente também tá então quando a variável tá con next públ ela também vai ser acessível no servidor né isso aqui vamos testar isso aqui ó vou copiar aqui vou colar de volta na nossa componente home né que é a componente que é montada do lado do servidor e eu vou navegar de volta pra home e a gente pode não sei se vocês perceberam Mas os logs que eu coloquei né os consoles logs que eu coloquei aqui dentro da minha componente de perfil eles não apareceram no

log aqui do vscode né porque novamente todas essas componentes estão sendo montadas executadas lá no cliente né lá no navegador Então agora eu vou voltar aqui ó pra Barra home para pro início né local host 3000 E eu salvei o arquivo salvei o arquivo eu tava procurando o consol o log aqui mas não vai aparecer no no Browser né esse log aparece no servidor então nós temos aqui ó a IPI Key e o local host 3000 sendo exibidos ó vou salvar de novo na verdade eu tenho que atualizar aqui né no Browser ele vai logar

aqui para mim duas vezes que são os dois logs das minhas duas variáveis de ambiente certo e aí Além disso nós temos aqui outras possibilidades com os arquivos de ambiente tá então o que que eu posso ter eu posso ter um arquivo P env development development certo eu posso ter um outro arquivo que seria o ponto env P production e eu posso ter um outro arquivo também que é o ponto env pon local tá então esses arquivos quando eu venho deixa abrir aqui o meu pack Jon quando eu venho aqui e executo o npm Run

Dev né para executar o meu projeto em desenvolvimento se eu tenho um arquivo ponv development o Next vai carregar esse arquivo quando eu venho aqui e executo esse start né que seria PR executar o a função o o projeto né como produção ele vai carregar a minha env de produção a menos que eu não tenha essa env local essa env local aqui é exceção sempre que eu tiver um arquivo p env p local o Next vai dar preferência para ele então vamos testar isso aqui ó eu vou pegar essa api aqui Vou definir nos outros

arquivos e o valor da api ke vai ser o nome do arquivo né então esse apiq vai ser local essa outra aqui vai ser produção pra gente conseguir acompanhar nos logs né E essa outra aqui vai ser development e eu tenho a env normal aqui que é vai ser n então aqui na minha home eu vou fazer isso aqui ó consol log api Ke só pra gente ficar com o terminal Limpo aqui mas a gente já pode ver que ele logou local tá então local é o nosso arquivo ponen P local ele é vai ser

sempre a preferência quando eu não tenho ele vou deletar ele aqui eu vou salvar aqui a aplicação eu vou ter que recarregar aqui o meu servidor né vou rodar aqui de novo o npm Run Dev porque como eu apaguei um arquivo né ele não detectou a alteração no arquivo então ele não recarregou a minha as minhas variáveis né mas agora que eu reiniciei ele já até logou aqui para mim ó os environments mas eu vou recarregar aqui a minha a minha tela né A minha aplicação e voltando aqui no terminal ele logou development ou seja

ele carregou a minha env de desenvolvimento Por que que ele carregou a env de desenvolvimento porque eu executei o comando né next Dev seria o comando que vai Executar a aplicação no ambiente de desenvolvimento e agora eu vou rodar aqui ó o npm Ram deixa eu ver se ele vai rodar o start logo de cara ele vai dar um erro né vou rodar aqui o npm Brum Build para ele gerar esse build aí essa versão de produção e aqui ó enquanto ele tá gerando a versão de produção a gente já pode ver que carregou a

nossa env de produção tá então ele vai gerar aqui vai fazer o build e eu vou tentar rodar ele aqui como produção né npm Run start para ele iniciar o meu servidor local né local host 3000 e aqui ele fez essa construção usando o meu ambiente as minhas envis né de produção no log Hum vamos vamos voltar aqui no navegador ele não é que como eu fiz o build Eu imagino que ele removeu ele removeu aquele meu console log né console log aqui na componente né como é uma server component ele acabou que ele acabou

removendo né Essa minha esse meu console log Tá mas eu vou fazer o seguinte pra gente conseguir testar então eu vou Hum vou fazer o seguinte eu vou colocar aqui dentro do HTML eu vou colocar um parágrafo e esse conteúdo aqui vai ser o process env api tá então vou salvar isso aqui vou parar o meu servidor de produção que tá rodando né vou rodar de novo um Build para ele realizar o build desse projeto no build ele aqui ó vai usar en de produção E aí depois eu vou rodar um start e a gente

acessa lá do navegador essa página e aí deveria ter um valor lá que é o valor dessa inv que é produção tá então eu vou chamar aqui o npm Run start né poderia ser só npm start mas aqui ó que tá a minha componente minha componente o meu navegador deixa eu ver aqui se ele já rodou rodou se eu atualizo isso aqui então temos aqui ó produção então com isso aqui a gente já viu que ele usou a env de produção a env de desenvolvimento também é o mesmo exemplo quando a gente roda o rev

né e o arquivo ponto env é caso nenhum desses ambientes seja definido né ele vai usar sempre o padrão ali ele é a segunda opção se a gente olhar até aqui nos logs ó tem aqui ó envir production vírgula ponto env né então se não tiver o arquivo env produção ele vai usar o ponto env comum beleza e a gente pode também fazer o controle através de uma variável que nós temos que é a node env tá se eu venho aqui quando eu vou digitar toda vez o process env ele vai me sugerir aqui ó

node underline env essa variável o Next usa ela para carregar dinamicamente algum arquivo pon env Então como que isso funciona se eu ten tenho aqui por exemplo um script Stage né seria aqui eu definiria por exemplo o node Envy igual stave ele até me sugere aqui ó e aí eu chamaria né um build ou eu chamaria o start né o build eu start que que acontece quando eu seto essa variável node inv Stage ele vai procurar por um arquivo com o nome pon env P Stage o mesmo nome que eu coloquei aqui na minha node

env e ele vai carregar esse arquivo para mim tá então eu conseguiria também fazer esse carregamento dinâmico Dependendo do valor aqui da minha node env caso eu tenha aí o ambiente de staging o ambiente de teste isso aí tudo funcionaria tá então a gente consegue escolher o arquivo de Envy que vai ser carregado de uma forma dinâmica e também a gente consegue controlar quais variáveis serão usadas no servidor e quais variáveis serão usadas aí no cliente né no Browser tá então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixando

um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima