LocalStorage + NextJS DA PRA USAR?? Cookies ou LocalStorage? | Salvando preferências de usuário

Подписаться 89 тыс.

Просмотров 18 тыс.

50% 1

Já sofreu com erros na hora de salvar tokens, preferências de usuários e outros dados usando local storage no NextJS? É por que você ainda não viu esse vídeo! Hoje vou mostrar como trabalhar com cookies no NextJS de uma forma super decente e como você pode mesclar o trabalho com localStorage, entendendo o funcionamento da ferramenta e por que muitos passam por problemas fazendo isso, então senta na cadeira, pega a pipoca e não esquece de aperta o freio de mão do fusca em cima do botão de like e subscribe pra fortalecer a firma, valeu! 👊
🔸 Código do Vídeo
■ github.com/omariosouto/locals...
■ www.npmjs.com/package/nookies
🔸 Link importantes para VOCÊ (você me ajudar a continuar trazendo conteúdo!)!
■ Quer saber mais sobre ser um Dev em T? / paulo_caelum
■ Quer receber 7 dicas toda segunda pra ler em 2 minutinhos? mariosouto.com/newsletter/
■ Sabia que eu tenho uma lojinha? mariosouto.com/lojinha/
🔸Quer ver mais conteúdos meus? Segue ai!
■ / omariosouto
■ / devsoutinho
■ t.me/hipstersfrontend
🔸Sabia que eu tenho séries na Alura também?
■ www.alura.com.br/webseries/fr...
■ www.alura.com.br/webseries/gi...
#React #NextJS #JavaScript

Наука

Опубликовано:

20 май 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@otaviolemos 3 года назад

Massa Mário: estava precisando exatamente disso! Valeu! 😄

@CarineBatataFrita 3 года назад

Assistir a sua empolgação ensinando é extremamente contagiante! Curti o vídeo, como sempre mandando muuuito bem!

@VoceBR97 2 года назад

Que vídeo incrível Márioooo Parabéns pela inspiração do canal, sem dúvidas uma grande ajuda pra comunidade e para o MUNDO

@FelipeFialhoDev 3 года назад

Extremamente didático como sempre. Monstro!

@Fernando-du5uj 2 года назад

Eu amo esse canal. Muito obrigado, Mário!

@diogozura 2 года назад

dev soutinhho salvando a cada dia... to passando um projetinho em JS puro para o next.js , cada video seu ajuda demais

@mattcardoso1503 2 года назад

Excelente vídeo e informação, tu és o cara.

@pelosmeusolhos938 3 года назад

Conteúdo massa irmão. Obrigado!

@ericsilvaccp 3 года назад

Mto massa, parabéns pelo conteúdo

@victordantas745 3 года назад

Ver a empolgação do Mário com o que ele faz é sempre incrível e me inspira demais a continuar estudando pra um dia quem sabe ser tão foda quando ele.

@amandanunes443 2 года назад

brabo, mais um inscrito hehe

@JeanTux 3 года назад

Muito show o conteúdo, sempre no 220v ... 👊🏽👊🏽👊🏽👊🏽

@wesleyangeli 10 месяцев назад

Rapaz, muito obrigado. Eu tava quebrando a cabeça com isso.

@DevSoutinho 10 месяцев назад

Tmj!!!

@raqueldebiase7847 Месяц назад

Cara, você salvou a minha saúde mental com essa saída do cookie. Estava há dias tentando fazer com que os dados fossem mantidos na minha aplicação depois do carregamento da página, mas o local storage, além de duplicar, zerava, mandava tudo pra casa do ca$%&lho. Muito obrigada mesmo!

@DevSoutinho Месяц назад

Fico feliz em ajuda! 😍

@raqueldebiase7847 Месяц назад

@@DevSoutinho 🥰

@faustogarciajacinto6198 Год назад

Salvou!!!! Eu tava apanhando pra fazer o get no localstorage...kkkk

@erikaskarda3660 3 года назад

Muito bom ! :)

@darkcaveron 3 года назад

Muito bom!

@charliebellow2229 Год назад

cara, ajudou bastante.. sou estágiário e pediram pra fazer a migração do react pra netjs tô cortando um dobrado pra fazer isso mas tô conseguindo.. realmente o next mexe muito com back-end.. mas isso vai me permitir aprender mais sobre tudo que tá pro trás da confecção de um site. a parte ruim é que tenho que aprender muito mais.. mas que bom que tem vídeos como esse pra ajudar em algumaas coisas

@FakeLewis 3 года назад

Lembro que quando esse vídeo saiu, eu assisti mas como não precisei usar naquele momento, eu assisti e só pensei "hm, tá né", mas hoje que precisei usar, lembrei e vim aqui na hora, e olha, sensacional

@BateraEntrevista 2 года назад

Fala Soutinho tem como você gravar um vídeo ensinando a configurar fontes locais no next js?

@lucianferreira3444 3 года назад

Vídeo top Mario, e o vídeo de como você faria o tema dark/light vai acontecer ?

@fabiofaria1327 2 года назад

Porra, quebrei muito a cabeca com isso e aprendi agora. hahaha valeu!

@arielton 2 года назад

Estou tendo esse erro em um componente de "carrinho de compras", onde apenas preciso persistir as informações do lado do cliente e mesmo usando o localStorage dentro de um useEffect não está funcionando, o que eu posso estar fazendo de errado?

@jacksonjws Год назад

Obrigado

@DanielRios549 2 года назад

7:24 Vc acabou respondendo uma dúvida minha "sem querer", eu me perguntava o motivo de não conseguir usar o nookies dentro do getStaticProps, eu sabia que era pelo fato do contexto dele não ter a propriedade req que tem no getServerSideProps, mas não sabia o motivo de não ter, agora faz todo sentido

@alitonoliveira1700 3 года назад

Show de bola! Mas fiquei com uma dúvida... Como o servidor sabe ou armazena a preferência de cada usuário?

@leonardomoreira1594 2 года назад

Opa Mário Blz? eu estou tendo esse problema em uma aplicação que eu estou fazendo onde eu defino o local storage no reducer, tentei usar o user effect já que o reducer é feito em função e não em classe, devo usar então o método dos cookies?, e parabéns pelo vídeo

@andrebarbosaone 2 года назад

Tem uma forma de nao expirar os cookies?

@faustogarciajacinto6198 Год назад

Faz um vídeo sobre o Zustand a alternativa do Redux

@o_magro 3 года назад

BRABO

@DevSoutinho 3 года назад

Tmj!!!

@Joao_PedroT 7 месяцев назад

serve para formulário?

@freitagnx 2 года назад

Sabe um tema que você poderia tratar, NextJs + Redux + Typescript.

@arozendojr 3 года назад

Sugestão de tema de vídeo, poderia mostrar alternativas de hospedagem gratuita para fazer portifólio, conheço só heroko, não sei se existe outros

@guilhermebalog 3 года назад

Olá antônio, tudo bem? Se você precisa de apenas um site estático (que não tem backend, conexão direta com banco, etc), dá pra usar o GitHub Pages, o Surge.sh ou o Netlify. Se você está usando next.js a hospedagem da vercel é bem interessante, o Soutinho já fez vídeo aqui no canal sobre. Dá até pra fazer umas coisas com backend. Pra backend só conhecço o Heroku também.

@nan-code 3 года назад

Em questão de autenticação com jwt por exemplo com api externa fica muito chato de gerenciar sessões e etc, eu costumo usar um HOC que faz o gerenciamento de rotas privadas

@DevSoutinho 3 года назад

Perfeito! A ideia do vídeo é mais mostrar uma base, mas o Hoc é o ideal pra próximo passo aplicando no dia a dia

@kaiquebarreto4580 2 года назад

Surgiu uma dúvida, a questão do fim dos cookies anunciada pelo Google. Já tem como contarmos com outra solução?

@DevSoutinho 2 года назад

Vai acaba os third party cookies. Mas os locais ainda vão funcionar, se não ia wuebrar a internet hahahah

@renatocesar9972 2 года назад

ok, mas como eu faço pra pegar os cookies dentro de um componente que não é uma página? por questão de modularização

@DevSoutinho 2 года назад

Só chamar o nookie direto no componente

@serioustube Год назад

Muito obrigado por esse vídeo. Acho que ajudaria muita gente se você também desse a dica de como fazer para remover ou limpar um cookie em nextjs sem quebrar a aplicação, considerando que a 'nookies.destroy' pede o contexto como primeiro parâmetro e não funciona direito sem receber. Eu em particular, estou sofrendo demais pra resolver isso não encontrei até agora em documentação como fazer para passar esse contexto para o método. Agradeceria muito caso você pudesse dar essa dica. De qualquer forma, obrigado e sucesso pra você.

@guilhermemaffei6532 Год назад

Fusca estacionado com sucesso!

@marceloguimaraes796 3 года назад

Show, professor, vc tem algum curso pago ?

@salvimateus 3 года назад

ue, entao pelo que entendi o servidor recebe os cookies do usuario e faz o build já com as preferencias dele. Mas isso só funciona quando o site é SSR sem cache, né, pq se gerar um site estatico ele vai salvar em arquivo estatico o que o primeiro acesso entregar (?) dai todos usuarios acessando aquele cache, iriam ter a msm preferencia

@DevSoutinho 3 года назад

Quando vc usa o SSR o site gera básico considerando o default e muda via serve se tem algum update. Se for estático, muda na tela, o que pode ocasionar um flickering

@salvimateus 3 года назад

@@DevSoutinho nao entendi bem a parte do "site gera básico" e se eu não usar cookies e usar o useEffect(), isso causaria flickering para dark mode?

@DevSoutinho 3 года назад

Foi mal seria gera estático *** escrevi errado hahahaa

@DevSoutinho 3 года назад

Provavelmente causaria flickering ao menos que vc defina os valores com as variáveis do css, pelos meus testes

@salvimateus 3 года назад

@@DevSoutinho show obrigado pela atenção!

@Guiazca 3 года назад

Outra dúvida, se possível, quando eu uso setcookie, o site deveria, questionar ao usuário para que ele habilite o cookie!? Ou não?

@DevSoutinho 3 года назад

Da uma procurada sobre LGPD, depende MT o tipo de cookie que vc tá usando

@zWonder 3 года назад

Adiantando aqui porque tenho certeza que a gente vai usar isso no AluraKut…

@DevSoutinho 3 года назад

hahahahha ligeirissimo!!!

@petregluiz 2 года назад

Mario, muito bom o conteúdo, mas tenho uma dúvida um tanto quanto Jurídica. Com a LGPD, tivemos que por a questão de aceites de cookies dentro do site que mantenho. Esse cookies deveriam entrar tbm nesses aceites, ou no caso de dados menos invasivos, não há a necessidade?

@DevSoutinho 2 года назад

Em teoria não, pq vc nao ta salvando nenhum dado pessoal comprometedor da pessoa. Mas vale alinhar com o juridico da empresa :)

@fmarquesbh 2 года назад

Amigo, você acha tranquilo salvar no cookie o Token JWT? Se não, qual seria a alternativa para isso?

@DevSoutinho 2 года назад

Token normal até vai, agora refresh token nao

@fmarquesbh 2 года назад

@@DevSoutinho desculpa a ignorância, mas o que seria refresh token?

@brunoleonardobr 3 года назад

Não entendi só se no getstaticprops eu consigo acessar o localstorage

@DevSoutinho 3 года назад

Nao rola, no começo do vídeo da o erro e tal, pq ambas as funções rodam no "servidor" o staticProps em tempo de Dev e build, e o serverSideProps em Dev e prós

@matheusaraujo8617 2 года назад

fazer isso com o useEffect não é uma boa alternativa?

@DevSoutinho 2 года назад

Sim, mas ele não faz a nível de servidor

@arturom9006 6 месяцев назад

Freio de mão do Fusca, quem conhece, sabe..

@Guiazca 3 года назад

Vou tirar um dúvida de noob Quando eu tenho vários usuários, e tenho por exemplo as informações de endereço telefone, seria staticprops ou serverside props?

@Guiazca 3 года назад

As informações são fixas até o usuário mudar, ou ainda adicionar um novo endereço, ele pode por exemplo ter mais de um endereço

@DevSoutinho 3 года назад

Pelo amor de deus não salva isso em cookie!!!

@DevSoutinho 3 года назад

Informações pessoais, o ideal é mandar mais requests pra pedir

@Guiazca 3 года назад

O melhor youtube da história!!!! Obrigado mestre, um dia quero ser igual a você

@renansouza351 3 года назад

Eu fazia na tentativa e erro kkkkkkkkk, eu salvo alguns temas no local storage

@DevSoutinho 3 года назад

dashuasdhudashudhuasuh manda no cookie que é sucesso, da pra mesclar as duas soluções e tal, mas no geral o cookie com expires vai funcionar melhor

@o_magro 3 года назад

Se eu passar na minha vaga eu te dou um beijo

@DevSoutinho 3 года назад

sdahudahudasu o parabéns eu dou o beijo vou fica devendo

@o_magro 3 года назад

@@DevSoutinho kkkkkkkkkkkkkkkkkkkkkkkkkkkk

@o_magro 3 года назад

@@DevSoutinho passei

@kalilmagal2733 3 года назад

A solução para poder usar o localStorage seria adicionar um script no _document para ele verificar o localStorage antes de renderizar a pagina, assim ele poderia atualizar as informações sem perder o SSR.

@DevSoutinho 3 года назад

Mas aí vc deixa meio inconsistente se quiser saber a nível de servidor as coisas

@kalilmagal2733 3 года назад

@@DevSoutinho Hm. Tem tbm uma lib chamada next-themes, que permite alterar atributos ou classes de elementos html de acordo com a preferencia do user (localStorage e prefers-color-scheme), e daí a ideia seria usar variaveis css que seriam reatribuídas de acordo com o atributo/classe antes da renderização no browser. Dessa forma, tbm funcionaria no SSG, mas é claro nn daria pra usar o localStorage em casos onde a gente nn depende de informações passadas pra elementos html...

@yesmanic 2 года назад

Amigo, como eu faço para ele verificar no _document?

@nanza86 Год назад

minha mae falou assim "como que ele sabe que ce tem um fusca?" kkkk

@flouainan Год назад

Só eu achei ele falando THEME idêntico ao Renan ensinando a falar THINGS ? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oo8iJFaK_yM.html E aí soltinho, você assiste choque de cultura ? hahaha

@DevSoutinho Год назад

simplesmente a ELITE do entretenimento cultural Hahahahah