PARE de usar o useEffect para fazer API calls! React Query + Next.js
Вставка
- Опубліковано 11 лют 2025
- INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
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:
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
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 26 anos e moro em Goiás. Eu compartilho todo tipo de conteúdo relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #frontend #https #nextjs #web #development #hooks #typescript
Livros para dar o próximo passo como dev:
Código Limpo
amzn.to/3hHXVKY
Como ser um programador melhor
amzn.to/3POQ5fq
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
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
Cara bom demais...dificil encontrar videos sobre react query...se puder trazer mais conteúdo sobre, principalmente o react query com react hook form!
Se é brabo de mais, todo dia estudando seus conteudo...
Opa, que massa Victor!
Fico muito feliz que os conteúdos estejam ajudando.
Seu canal é uma pérola aqui no YTB, conteúdo muito bom cara, parabéns aí tmj
Valeu demais Helio! Tmj 👊
Muito bom conteudo como sempre!
Valeu demais Henrique!!!
Borther! Vc tem uma didática incrível, um projetinho completo ou até mesmo um curso seria maneiro
Fala Adolfo, muito obrigado!
Simmm, vou trazer sim uma série pra gente ir desenvolvendo por completo!
Canal top demais, parabéns pelo trabalho
Valeu demais Eriton!!!
Cara, que vídeo sensacional.
Traga mais vídeos sobre React Query!
Muito bom o vídeo, parabéns pelo material excelente!
Valeu demais Alison!
de verdade mesmo sua didática é muito boa, se vc fizesse uma aplicação criada em next, hooks e afins seria muito maneiro
Muito obrigado Felipe!
Vou trazer sim um projeto, do inicio ao fim.
seus conteúdos são incríveis, estão sendo de grande ajuda, muito obrigado
Valeu demais! Fico muito feliz em saber disso, de verdade.
Cara é bacana demais a react-query, só que com next 13 a gente tem mais desafios para utlizar elas por conta do components de servidor. Seria legal tu trazer com usar o prefetch que é algo que na própria documentação indica a gente usar no next 13.
Exatamente, com o Next.js 13 tem vários pontos pra levarmos em considerações por conta dos server components.
Estou estudando exatamente isso.
@@devjunioralves Eai, tem algo sobre isso? Gostaria muito de aprender a fazer SSR com isso, como é server-component ele reclama do uso do useQuery :(
@@ryancosta989 Fala irmão, teu comentário tem um tempinho já não sei se já sanou essa dúvida kk, mas pra quem ainda tiver essa dúvida:
Crie um componente Client Side onde vai ficar o Provider do React-Query, usa esse código aqui como base:
'use client'
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { useState } from "react";
export default function Provider({children}: {children: React.ReactNode}) {
const [queryClient] = useState(() => new QueryClient());
return (
{children}
);
}
E usa esse código no layout.tsx assim, só lembra de importar o Provider que vc criou lá em cima:
{children}
To usando o React Query assim mano, não sei se é o melhor jeito, mas funciona kkkk...
nice video mano, tenta trazer um do NextJS fazendo chamadas pra graphql
Opa, boa mano! Valeu pela sugestão.
Parece que você lê a mente da gente trazendo essas libs sensacionais!
Kkkkkk To começando achar que é verdade isso, pq já me falaram muitas vezes.
So eu que vi que no teste do react query tu colocou 30 minutos? kkk Otimo mano, não conhecia essa ferramenta.
Muito bom!!! Obrigado!
Valeu Pedro!!!
muito bom!
Valeu!
Da ora demais! Tem como fazer um vídeo sobre paginaçâo infinita usando essa lib?
Opa, tem sim! É sensacional demais as features que temos usando essa lib.
Mestre se for possível trás um vídeo para gente sobre SEO no next, meta-tags e afins. tamo junto
Excelente sugestão!
Com certeza Lucas, SEO no Next.js 13 ta sensacional!
Eu tenho uma duvida, Eu uso nextjs 15 app router, e to observando nas requisições que ele ta fazendo duas chamadas antes de cachear, uma do servidor e outro pelo client.. como evitar isso ? quero que ele faça apenas em um e nao repetir a mesma requisição
Cara voce podia fazer um vídeo sobre i18n mas um bem completo com gerenciamento pelo cookie e rotas que podem ou nao usar o locale
Opaaa, excelente idéia! Anotado aqui, vou trazer sim!
Bacana o vídeo, isso funciona similar ao SWR e no next13 vale a pena usar? Parabéns pelos vídeos!!!
Exatamente, ele tem o mesmo propósito do SWR, eu particularmente prefiro o React Query.
Eu acho que não faz muito sentido no Nextjs 13 não, por conta dos server components, o React Query roda do lado do client.
Valeu demais man!!!
Tem mais videos de React Query com o Next mais recente? Traz video com useQueries
No Nextjs com App Router, não faz mais tanto sentido utilizar o RQ.
@@devjunioralves E como é feito busca numa API agora?
❤
Cara, já estou surtando, devo ou não usar react query com next 13 app router, faz um video plsss!!! E se não precisa usar, então como faço oq eu fazia com react query, sem ele??
Em relação ao tempo de 30 segundos, caso ir para outra página, alterar algo no banco de dados através de um formulário, por exemplo e voltar para a página anterior, como não vai fazer a requisição, os dados não estarão atualizados, certo?
como deixa esse cursor com efeito smooth?
já uso ela com o zustand a uns meses e chega a ser ridículo de tão fácil que fica gerenciar os estados com eles 2, usando zustand pro estado do client e o react query pro estado do server, única parada é que no next 13 não sei quando usar o react query e quando fazer a request direto no componente já que ele faz quase a msm coisa do react query q é o cacheamento, no 12 eu conseguia dividir de boa, no 13 q me deixa todo confuso KAKAKA
Kkkkk Exatamente, estou estudando sobre isso também, pois o Next.js 13 mudou muito a forma de criar as paginas e componentes!
No minuto 8:50, qual é a extensão q tu usou pra exibir o log no próprio vscode em azul? É o quoka?
Não, é o console ninja.
Tem um vídeo onde mostro minhas extensões, da uma olhada, tu vai curtir!
Teria como integrar isso com o getServerSideProps ou outras formas de SSR do Next?
Não, pq o React Query roda do lado do client, não do server, Pedro.
O Nextjs 13, temos controle do cache no server.
Fala Junior Alves. Fantástico o conteúdo!
Cara, vi um vídeo de 2 anos onde o professor substitui o Redux pelo RQ. Você acha uma boa prática?
Pretende fazer vídeos com query pagination e mutations?
Valeu Adriano!
Depende muito do caso, eu, hoje em dia, não utilizo Redux mais, acho que existem soluções mais simples. Um ponto de estudo que recomendo é Zustand (state management, caso necessário) com React Query.
Sim, quero trazer mais conteúdo de React Query com certeza!
Esse é o vídeo que comentei
ua-cam.com/users/live0uvXCGMYYP0?feature=share
@@silvasouzaadriano Opa, show, vou dar uma olhada!
17:04 eu morrendo vendo que ele colocou 30 minutos ao inves de 30 segundos kkkk
Kkkkkkkkkkkkkk quando eu percebi ja era tarde, o vídeo já estava no ar 😞
eu utilizo a pasta app no next 13 esse provider eu envolvo aonde pq nao tem o arquivo app
O arquivo layout.tsx na raiz da pasta app é como se fosse uma mistura do _app.tsx e o _document.tsx que temos na pasta pages.
É la que passa os providers de context e etc.
Porém, é importante entender que, no Next.js 13, os componentes por padrão são server components, e o React Query é client-side.
Dependendo do caso, não faz muito sentido utiliza-lo no Next.js 13.
@@devjunioralves Nessa situação quais seriam as alternativas para o data fetching no Next 13?
Cara, ensina como que faz isso funcionar na versão nova do Next com a App, por favor. Ja to perto de ir vender arte na praia...
Kkkkk No Next.js 13 não precisa de tu utilizar o React Query, o próprio Next.js já faz o controle do cache de requests. Daí, não faz sentido utilizar o RQ.
@@devjunioralves aneim bicho... segunda-feira to na fila pra adquirir seu curso urgentemente kkk. Valeu demais, mais uma vez.
@@FlavioHenrique-uu5mg Haha Valeuuu Flavio, tmj 👊
Muito interessante esse React Query, será que é possivel usar ele dentro das api routes do nextjs ?
Qual seria o contexto? Pois, talvez não faça muito sentido em utilizar esse nas APIs do Next.js.
Que extensão é essa que você está usando que ela tem tipo um "autocomplete" e mostrando os valores do data como hint?
É o tabnine, tem um vídeo onde mostro minhas extensões, config e themes, confere lá, tu vai curtir!
@@devjunioralves Vi o vídeo lá, já garimpei algumas outras que eu não usava! Valeu
@@spereiravysache Show! Qualquer coisa, só dizer!
Junior,
1000 * 60 * 30 não seria: 60 segundos * 30
Caramba, de fato, você está certo!
Fui rever agora que percebi, muito obrigado pelo feedback!
posso usar a lib em server componentes?
Não, pois o RQ é client side :(
Vi que tu usa o yarn, usa ele no dia a dia também? Uso o npm, compensa migrar pra ele?
Utilizo sim no dia a dia, mas hoje, se você tiver usando uma das ultimas versoes do npm, talvez não compense migrar não.
Faz um projetinho aí com reactjs e NextJS 😀🙌🏽💵
Vamos ter sim um projeto hehe
vai ter video pro useSWR? ou muda pouca coisa?
Muda pouca coisa Felippe, só detalhes mesmo.