NÃO COMETA ESSE ERRO NO NEXTJS 13
Вставка
- Опубліковано 10 лют 2025
- Você já se encontrou em um cenário em que precisava transmitir informações entre componentes distantes na hierarquia, tornando a passagem de props um verdadeiro desafio? A React Context API veio para resolver esse problema, proporcionando um meio simples e elegante de compartilhar estados e informações cruciais sem esforço.
Mas como utilizar esse recurso no Next.js com os RSC?
INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #nextjs #javascript #typescript #context #tips #frontend #web #browser
Que top! Essa dica muda o jeito de usar o Next com context. Parabéns pelo conteúdo!
Boa dica mano, uma boa sacada, recém começei a utilizar o nextJS, versão 14, e estava em dúvida sobre isso, já migrei 02 projetos da empresa, valeu pela dica!
Realmente eu tava com duvidas nisso, da-le Junior!
Fico feliz demais em saber disso man 👊
vc colocou no layout o provider que faz tudo que tiver no children ser client side, o que faz todas as páginas serem client side
Não Kimitri. Se você passar via props, não tornar os componentes filhos em client side, inclusive essa é a forma correta de intercalar RSC com RCC.
Tem outros vídeos aqui no canal onde eu explico mais sobre isso.
Muito obrigado!! Esse foi o único vídeo que vi falando sobre como usar corretamente a Context API no Next! Parabéns
Que show que curtiu Matheus, valeu demais 👊
Sensacional Junior . Muito obrigado 🎉
Eu que agradeço! 👊
Vou me inscrever quando vc desativa essa extensão que fica acusando erro enquanto digita, isso ataca minha ansiedade kkkkkkkkkkk
Kkkkkkkkkkkk Só vou desativar depois que tu se inscrever 😌😂
Top demais mano, seu conteúdo e muito foda!!!
Valeuuu Jean!
E para usar o Hook nos componentes? ... sem o 'use client' ele não entende a importação. Tem algo assim pra fazer também?
Sim, quando tu precisa de algo do React que seja client side (como os hooks), vai ser necessário a diretiva 'use client'.
Boa mano, video muito show cada vez mais esclarecendo nossa duvidas sobre o next 13 parabens
Valeu demais Rafael!!! 👊
Excelente abordagem! Valeu pelo conteúdo!
Valeu Ruan!
Pessoal, não esqueçam de comentar suas dúvidas e sugestões aqui, isso me ajuda demais a continuar trazendo conteúdos! o/
INFORMAÇÕES IMPORTANTES 👇
TODAS as novidades do Next.js 13:
ua-cam.com/video/ekVlgxk7LLY/v-deo.html
Livros que eu recomendo:
Rápido e devagar
amzn.to/3PLrYhq
Como ser um programador melhor
amzn.to/3POQ5fq
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
Isso que chamo de alto nivel. top irmao
Valeu demais Leandro!
Muito obrigado por compartilhar sua experiência conosco.
@devjunioralves mas ainda sim, mesmo com o contexto desse jeito, eu não conseguiria usar o estado do lado do servidor né ?
Excelente conteúdo! Fiquei com duvida como seria possível usar uma biblioteca que use contexto, como o material UI. Tem como fazer um exemplo?
Tô com essa mesma dúvida, comecei agora com Next.js e decidi aprender alguma biblioteca de componentização, no caso o Material UI também. Estou com essa dúvida pois todos os componentes da biblioteca são client-side e me parece uma desorganização desnecessária ficar isolando cada componente para usufruir do server-side
Boa, tem como sim, mas o caminho é utilizar essa estratégia de separar os providers.
Primeiramente parabéns, sempre vídeos de qualidade, só queria tirar umas dúvidas se for possível. Para um context só ficou bem claro, mas no caso se eu tenho vários contexts na minha aplicação, eu iria envolvendo os contexts dentro do Providers assim como a gente fazia na _app? E pro exemplo das libs externas também não entendi como seria.
Valeu demais! 👊
Exato, basta tu ir adicionando os contexts necessários, criados por você ou de libs externas, dentro do Providers.
Como faço para uma página de etapas de cadastro ao clicar em voltar não perder o valor dos estados em uma context Api? Não estou conseguindo recuperar
Mas no caso, o children do provider, (que no caso poderiam ser todas as paginas do sistema) nao ficariam como client components dai?
Não, isso que é interessante nesse pattern. Tem um vídeo exclusivo sobre ele, confere lá, vai te ajudar entender melhor.
Muito bacana o conteúdo, porém tenho uma dúvida. Server components se estiverem encapsulados dentro de client components, igual o exemplo, onde o componente Providers é client, eles não se tornam client components?
o next vai renderizar o component individualmente, logo encapsular um server-component dentro de um client component não fará o mesmo ser renderizado no browser.
Excelente pergunta, a resposta é não.
Pois estamos passando os componentes via children. Tem um vídeo focado no pattern que utilizei, confere lá, pq la eu explico mais sobre isso e como funciona.
Bom video, em um projeto meu, eu estou com dificuldade em integrar uma api do stripe no next 13, você poderia trazer para me ajudar?
Faz um tempo que não uso o Stripe, mas acho que posso trazer sim Leonardo.
Valeu man 👊
Showww demais! 🚀
Junior, não daria para usar o use client no próprio context?
tambem fiquei com essa duvida.
tive essa msm impressão, na vdd, até uso dessa forma em alguns projetos
Daria sim Luigi, mas daí tu teria que fazer isso em todo contexto que for utilizar.
Fazendo igual mostro no vídeo, dentro do Providers, o 'use client' é aplicado em todos.
Conteudo top, me ajudou demais!!!
Tmj Henri! 👊
Interessante! Seria bacana refazer aquele vídeo de rotas privadas fazendo o uso disso!
Parabéns!
Perfeito Gabriel, vou refazer sim!
Uma dúvida, e pq não passar o 'use client' apenas para o UserContext ? que tem o provider junto como o hook.
Tu pode passar lá, porém, se tiver mais contextos dentro de Providers, terá que fazer isso em cada um deles. Passando no Providers, automaticamente todos os contexto ali importados serão client components.
Por que exportar ts ?
Como assim Jhean? kkk
Sabe dmais!
Nada, sempre aprendendo...
Ao criar um tema pelo context como posso pegar seus valores? Meu context está retornando 2 coisas: nome (light ou dark) e função pra alterar o tema, precisaria de mais alguma coisa?
Normalmente os valores são passados para o provider, e ao envolver o provider na nossa aplicação a gente pode fazer o uso desse hook (useUsersContext: exemplo do vídeo) para conseguir recuperar esses valores onde quisermos.
Exatamente o que o @mtalves disse! Perfeito.
você já poderia colocar o 'use cliente' no seu contexto? ao invés de criar outro competente e fazer a importação do context falando que ele é 'use cliente'?
Sim poderia, sem problemas. Eu fiz dessa forma apenas como exemplo e para deixar centralizado em um único ponto, ja que todo context sempre será client side.
Cara Parabéns pelo excelente conteúdo, tenho uma dúvida como adicionar mais de um contexto?
Valeu Giovanni!
Tu pode ir passando um contexto dentro do outro, eu tenho um vídeo onde mostro isso aqui no canal, vai te ajudar.
Que tema é esse do vscode?
icones e cores
Mais um ótimo vídeo, parabéns!
E como eu faço pra usar esse "name" que tá vindo no contexto, em um server component? Por exemplo, usando um Route Handler pra pegar informações baseado nesse name?
Tu não consegue utilizar Context dentro dos RSC, pois é algo exclusivo do client.
Nesse caso, tu precisa de uma estratégia de composição de componentes para utilizar os contextos apenas onde são necessários.
Opa tudo bom, sinto em discordar, colocar um 'use client' não diz que todos os filhos serão clients, diz somente que esse seu componente espera ser "completamente funcional" no lado do cliente (por exemplo usar a window), já os filhos desse context, caso sejam sem 'use-client' serão renderizados no lado do servidor mesmo assim. Ou seja, é possível ter componentes client-side com filhos server-side.
Sim Jonathan! A única forma de fazer essa combinação é exatamente como você disse, componentes passados via children. Assim, podemos intercambiar client components com server components.
ao fazer isso na no rootlayout, as paginas permanecem server component ou se tornam client component ?
Permanecem server side components, porém com componente do cliente como o Juniro fala em 13:11
João, exatamente oq o Luigi falou.
Salve Júnior, estou com uma dúvida sobre tipagem em TS, eu tenho que tipar TUDO ? é necessário tipar um useSate ? Tipar retorno de funções ? Existem boas práticas pra isso ?
normalmente tipagem de useState é valida quando a gente declara objetos ou arrays vazios no estado inicial desse hook. Mas já estruturas como strings, números e etc o ts cuida de fazer autoinferência, um exemplo:
const [name, setName] = useState(' ')
Nesse primeiro caso, declaramos uma string vazia nessa nossa variável name, se vc passar o mouse por cima da variável name, verá que o TS já cuidou da tipagem. No entanto, nesse caso:
const [data, setData] = useState([ ])
Verá que o typescript não é capaz de inferir qual o formato desse array, aí que entra nossa tipagem, pois vc vai descrever do que esse array é composto (strings, números, objetos?)
Agora falando em relação a retorno de função, seria uma boa prática, até pq nem sempre o typescript consegue inferir o tipo do retorno, aí você pode ajudar ele fazendo essa tipagem adicional. Mas vai muito da construção da função em si, ou seja, são casos e casos.
Boa pergunta João!
O Typescript já consegue inferir em várias situações, principalmente nesses casos que você citou, então, não há necessidade de tipar tudo.
Eu tenho vídeos aqui no canal onde falo sobre isso, confere a playlist de TS que vai te ajudar.
@@mtalves Valeu pela resposta monstra mano ! Eu fiquei com dúvida por conta dessa inferência que o TS já faz, agora está tudo bem esclarecido, valeu demais!
@@devjunioralves Valeu Júnior, eu trabalho com Js e estou me aventurando pra TS agora, seu canal está sendo muito importante pro meu aprendizado, em ts, react e principalmente next
Excelente video!
Mas não consegui resolver meu problema, está dando o mesmo erro que deu no video, estou o NextJs14, segui seus passos mas não consegui resolver. Se alguém puder dar uma força, eu agradeço!
Boa noite! A partir de quantos componentes "herdeiros" você acha interessante utilizar o Context Api? Você acha que se tivermos 3 componentes filhos, já seria o ideal? Obrigado!
Mano, muito bom teus videos, mas cara, eu to precisando de uma explicaçao da raiz da coisa, sou desenvolvedor IOT e to migrando pra area web usando react, to tendo umas dificuldades na parte de rotas privadas, autenticaçao com email e senha, e retornos de tokens para o back tratar si o usuario pode ou nao usar a aplicação, faz um video sobre axios recebendo e retornado o token para validação, passando tbm essa mesma validação em rotas privadas, to com uma grande dificuldade nisso, entra em contato qualquer coisa, si pah agnt faz ate uma aula particular e agnt ver valores, valeu mano.
Você ta usando Next.13 com App Routes? Se sim, você pode usar o padrão Api Routes e isolar as chamadas do Axios lá dentro. Então vai ficar algo como: Você cria um context igual o Junior mostrou no video, e dentro dos métodos do context (login, logout, register) você vai ter chamadas axios pra essa rota Api Routes (/api/auth/login, /api/auth/logout). Por fim, você pode criar, dentro do Api Routes, um (/api/auth/token) que retorna, usando o useCookies e cookiesStore o cookie. Ah! E no /api/auth/login, lembra de criar o cookie com o access token (ou o que você estiver usando).
Boa sorte mano :)
Eu queria que pelo amor de Deus alguém me mostrasse como faria um filtro de buscas utilizando next13.4, onde os dados vem de uma api por exemplo, poderia ser jsonplaceholder, jogar os dados na tela, colocar um input onde eu digito a busca que quero fazer nos dados que vem da api.
Tu pode fazer o fetch da API em um RSC, daí passar, via props, os dados para um client component, onde estão os filtros (já que vai precisar de interação do usuário).
Gostaria de fazer uma pergunta, não tem muito a ver com o conteúdo do video mais sim com as "api routes" do next, como você lida com o tratamento de erros assíncrono nas "api routes" ? para fins de clean code
Micael, da mesma forma que você trata em um backend (com express por exemplo).
Se você não tem experiência com Node, recomendo estudar um pouquinho, pois, vai te ajudar demais, principalmente trabalhando com o Next.js.
Eu posso fazer um vídeo explicando melhor sobre isso, se tiver mais pessoas com essa dúvida.
@@devjunioralves eu sou mais do front mesmo kkk, mais com express eu utilizo um middleware para lidar com os erros, um "resolver" que contem uma "promise" que tenta resolver minhas rotas caso contrário o middleware de erro é executado, No nextjs não encontrei uma forma estável de encadear meus middlewares
Sensacional! Você acha que essa complexidade a mais pode ser um ponto negativo?
Os RSC trazem uma complexidade a mais sim, isso é fato. Precisamos entender como funcionam, pois é bem diferente de um componente client side.
Porém, trazem muitos benefícios tb. Mas não vejo como ponto negativo, é questão de costume mesmo.
Valeu Vladimir!
Estou com uma dúvida agora eu ainda não estudei nenhuma versão do nextjs, posso estudar a versão antiga e depois a versão mais nova ,ou já devo partir direto na versão mais nova ? Agradeço todos que me ajudarem tmj
Acho que você começar com a versão 13 mesmo (é a ultima até o momento), porém utilizando a Page Router (padrão "antigo" de roteamento) e depois que tiver uma base legal, ir para a App Router (padrão "novo").
comentario pra engajar o canal
Valeuuu Max!
Júnior , o REACT CONTEXT é uma API que é utilizada para GERENCIAR ESTADOS(states managament) , certo ??? Ou seja, ele é diferente dos REACT HOOKs (ex. useContext) ??? Parece ser uma pergunta inútil, mas vai me ajudar bastante 😊 Ps. Mano, estou te seguindo e dei um LIKE =)
Fala Tiago, blz?
Não é inútil não man, a pergunta é boa.
A Context é uma feature que o React nos disponibiliza para repassar props para componentes distantes na hierarquia (componentes "desconexos"). E utilizamos esse recurso via uma API do React.
Mas a Context API não é um state management, tem um vídeo aqui no canal sobre isso, recomendo tu conferir lá pra entender mais sobre.
Valeu demais! 👊
Um exemplo de gerenciador de estados seria por exemplo o Redux.
@@matheuspadilha2727 isso Matheus, Redux, Zustand, Recoil, Jotai...
Mano só faltou mostrar funcionando.
Tenho outros vídeos aqui mostrando mais sobre esse assunto Alison, da uma olhada, vai te ajudar bastante.
ua-cam.com/video/pF3rqQzS3Jo/v-deo.html
o vídeo dele falando sobre useCallback
Valeu Pedro!!!
cara, me socorre ai, no next qnd tento enviar a resposta da api, ele diz que res.status/json não é uma função