Muita gente tinha criticado as mudanças do NextJs, mas o objetivo deles está bem claro já tem algum tempo. Eles estão trabalhando o framework para ser uma caixa de ferramentas que segue por aquela linha da citação de "baterias inclusas", porém muito mais amplo do que já era. Não atoa eles subdividiram as responsabilidades para que isso fosse possível, sendo time next focado em funcionalidades de servidor, ferramental e desempenho, Tailwind para focar em estilização já nativa e o time do React com a responsabilidade de integrar o roadmap atualizado com as bibliotecas JS/TS, também focando em desempenho, compatibilidade e trazendo novas funcionalidades (muitas vezes alinhadas com a Vercel, principalmente por boa parte do time React original ter ido pra lá). Apesar de a Vercel querer vender um produto com tudo isso no final, ainda assim você consegue pegar até uma VPS, subir a aplicação e rodar sem muita crise, porém claro que algumas questões de cache, segurança e algumas ferramentas como a otimização de imagens vão funcionar adequadamente só lá (não deixa de funcionar, mas requer mais processamento). Nesse exemplo das imagens, por exemplo, se não usar um worker externo conjunto a lib Sharp, tempo de build realtime das páginas adquiridas em pós processamento de build de aplicação acaba sendo afetado. No final provavelmente o resultado é que você não vai precisar mais usar bibliotecas como a React Query (Tanstack), ou mesmo as libs externas de estados globais (Context Api não acho legal, aí ainda vale a pena usar um Redux ou Zustand da vida), e no max um ZOD para simplificar validação de tipagem e schemas das APIs do próprio framework (que também nasceram para matar o backend node apartado do front). Obs: Não remove a necessidade de uso para apis comuns de conexões externas, como as de bancos de dados, AWS e algumas libs de observabilidade, porém essa implementação você pode isolar na camada de API do Next, ou rodar a partir de uma server action que já está trabalhando em uma camada isolada do frontend (eis aqui o medo de todo mundo quando os caras da Vercel botaram uma chamada de banco de dados ali dentro kkkkk)
Ta tudo na doc. O Diego só foi lá, leu e resolveu gravar um vídeo pra quem não gosta de ler a documentação. Ele tem muito conhecimento pois parece ser um cara que sempre acompanha a evolução das stacks e tem coragem de ler as documentações. Quem somente acompanha vídeos jamais vai ter o conhecimento que ele tem.
Presente professor! Muito boa a explicacao, confesso que nos projetos de Next 14 (ate entao) venho utilizando RSC apenas para carregar dados iniciais da tela. De certa forma, utilizando react-query, meu "data" nunca eh undefined!! Vou tentar aplicar esse novo "pattern" daqui pra frente e ver se me acostumo, abracos!!
Vim pegar um resumo de next, porque já trabalhei com react e fiz projetos pessoais com next pois na minha empresa era sem ele. Ai mudei de empresa e hoje nao uso mais React, só que não queria perder tudo de bagagem que eu tinha né, ai to aqui pra tentar pegar um resumo daas coisas hoje. Sem condições cara :,( .... Ele ja falou sei la quantos termos novos, e olha que nem parei de trabalhar com react faz tanto tempo. Eu percebi que se eu não quiser perder minha bagagem, vou ter q estudar react de novo como se nunca tivesse visto. React, não sei os outros framew. pra frontend, está sem condições. É todo dia mil tech nova que surge, ao invés de evoluir oq já existe, acho que acaba sendo por isso que outras linguagens e ecossistemas tipo C# e Java acabam sendo mais maduros. Obs.: adoro js Mas ta sendo tanta revolução que daqui a pouco a gente volta pro começo da roda.
Isso abre um leque de possibilidade de novas API's onde, pode esconder certas requisições do cliente, isso vai prevenir muito de raspagem direto no end-point da aplicação.
Massa bem explicativo! Estou quebrando a cabeça com o RSC com uma questão re-rendering em uma aplicação com gráficos e precisa ter o estado no lado client para filtrar com base no período selecionado pelo usuário.
Fala Diego, as actions ainda acho secas pra usar em produção, mas estou começando a usar a biblioteca next-safe-action que deixa a utilização delas mais robusta, daria um bom vídeo 👍🏼
O erro em 16:00 pra frente é que quando utiliza Server Action, não precisa especificar method e encType no formulario. Vc especificou method e não precisa, o nextjs já trata isso
Tô comendo agora no react to na parte de components ! Em um projeto rea e viável ficar usando componentes pra tudo? Tip componentes pra Header,logo,navbar e exemplo carinho de compra 😅
Eu posso usar esse Json serve para buscar dados? tenho um array de objetos cheio de dados e na página tenho que usar alguns desses dados dependendo do cliente. Ou melhor usar uma API local? Obs: se eu usar o Json serve na hospedagem vai funcionar normalmente em produção?
Cara fantástico... acredito que irá economizar muito tempo e linhas de código com isso.... por outro lado vc perde a visão do que está sendo feito por trás... talvez para dar suporte fique um pouco mais complicado se o dev não dominar o Next. Mas ótimo video. Super esclarecedor.
Eu quero uma maneira interessante para lidar com Access e Refresh Token. Mesmo interceptando uma requisição do lado servidor, ao receber novos tokens não tem como atualizar os Cookies. A única forma que encontrei foi fazer todas as requisições com Token pelo lado cliente e atualizar os Cookies. Obs: API externa, nada de NextAuth. Explicando em passo-a-passo: Fazer login: POST /login Recebe ACCESS e REFRESH Guarda ambos nos Cookies Passa um tempo Faz request pelo lado servidor: ALGO /{algo} Recebe um 403 (EXPIROU O ACCESS) Intercepta e manda o REFRESH Recebe tokens novos ACCESS e REFRESH AI VEM O PROBLEMA Se tentar atualizar os Cookies com next/cookies, Nookies, pela API através do retorno da request, ELE NÃO ATUALIZA OS Cookies Se a requisição for do LADO CLIENTE ai é possível fazer essa atualização de COOKIES A própria documentação do Next diz que é possível alterar os Cookies em alguns momentos, mas nem um deles serve pra uma requisição Fetch customizada ou Axios interceptando.
Também estou fazendo dessa maneira. Pelo que eu vi, o NextAuth tá desencorajando usar o fluxo de credentials e por isso é limitado. Não tem a parte de refresh token :/
Utilizando npm run dev funciona perfeitamente, porém, quando rodo o build (npm run build) aparece o seguinte erro: Module not found: Can't resolve 'react-server-dom-webpack/client' .A única diferença é que eu estou utilizando o useFormState do 'react-dom' para o tratamento de erros... Alguém sabe o que pode ser?
Existem, mas o Next está fazendo uma transição dese modelo de getServerSideProps e getStaticProps para esse modelo que mostrei no vídeo. A grande motivação é que antes, no Next 12 pra baixo, todos componentes da aplicação eram componentes client-side e a gente apenas adicionava uma camada de servidor em alguns deles usando getServerSideProps. Agora, todos componentes são por padrão server-side, como se todos componentes já usassem getServerSideProps. E daí, os componentes que a gente precisa interação, a gente anota ele com o "use cliente", ou seja, é o caminho inverso.
Perfeito@@dieegosf obrigado pela explicação. Inclusive eu parei no next12 em um projeto que eu fiz e não avancei mais, so estudei vendo alguns vídeos. Compensaria mudar o projeto, que é grande e roda em produção para o next14? ele é usado so como front e o back em laravel. Obrigado boa noite.
@rocketseat Neste caso (que é similiar ao meu). Temos um servidor API e mais o servidor do Next.js. Usando "server components" não traria uma delay maior, uma vez que cada request do Client será mandada primeiramente para o servidor Next.js e este irá fazer uma request para o servidor API, tendo 2 requisições. Faz sentido usar "server components" e "actions" quando se tem um servidor de API separado?
essa é a mesma duvida que eu tenho e nao consigo achar nenhuma resposta decente na internet, a maioria vai só seguir examplos basicos de criar lista todo etc, nada que seja util pra producao. Nao entendo pq ninguem fala sobre isso, sera que geral usa nextjs como um framework fullstack? No meu caso, queria conectar o nextjs a minha api externa feita com spring boot mas estou tendo dor de cabeca :(
@@renanboni7636 A solução que encontrei é não mantendo isso numa Vercel + server separado para API. Se vc colocar todos os serviços (FE server + BE server + banco de dados) em uma VPC vc consegue tempo de latencia entre eles bem baixo. Caso sua aplicação não seja grande, vc pode considerar colocar tudo no mesmo servidor (sendo que nao irá precisar escalar). Mas caso dependa de serviços como Heroku + Vercel com certeza vai ter um tempo de latencia. Minha dica é: Não deixei isso ser um problema e não perca tempo com isso agora, espera o problema de performance aparecer para entender como resolver no futuro se fizer sentido.
@@lucascoliveira3957 Não tem como retornar do server actions uma response com statusCode. Basicamente é 200 ou 500. Se você lançar um erro, vai ser 500 com uma mensagem de erro. Essa mensagem de erro só funciona enquanto você esta no modo de desenvolvimento. Seria ótimo se funcionasse no modo de produção, mas por algum motivo a vercel remove a mensagem quando você builda a aplicação. Dito isso, a forma de você tratar erros então é retornar 200 no body um campo error ou semelhantes. Na prática, você pode e vai funcionar, porém o código fica muito mais verboso.
Sim, tem muitas coisas que são impossíveis de serem feitas de forma simples usando Server Components, por exemplo, paginação com scroll infinito, você provavelmente vai preferir usar o React Query, mas não só isso, toda vez que você precisar carregar dados em client components você vai recorrer ao React Query.
Com toda essa pegada de server components, consigo buildar normalmente um app com static site? Ou preciso necessariamente de um servidor node rodando junto?
Vejo esse video no momento que estou estudando requisições em APIs com Tanstack Query que seria uma opção melhor que usar o useEffect e vendo voce executar o fetch no proprio componente (com o recurso do async) me pergunto se devo deixar de lado o Tanstack porque um dos motivos que comecei a estudar essa forma de buscar dados em APIs eram as promessas de vantagens de isLoading, error, nao usar states, fazer o destructuring, etc. ps: Faz mais exemplos com APIs externas (sem rodar um servidor localmente) se puder
Tu acha que o next vai se tornar um framework utilizado com muita frequência junto ao react? Ou tem outros que prometem entregar mais! Acho o next muito bom, a forma com que ele vem evoluindo e facilitando alguns pontos no desenvolvimento!
muito bom o conteudo ... fiz o codigo , e tentei fazer um botao excluir meus slugs, mas por estar do lado do servidor deu ruim, aguem aqui pode me ajudar
Você pode usar o "key" do React, ou seja, você faz a revalidação de uma página porque veio uma nova informação, com essa nova informação, você pode pegar o ID do primeiro registro ou do último (porque vai mudar) e usar como key que faz o componente atualizar: github.com/rauchg/emoji-todo/blob/main/app/page.jsx#L15
Pessoal, alguém sabe como criar um módulo npm que funcione no next, um contexto, preciso fazer um porte de next pra expo, e quero isolar os hooks e as interface GraphQL em um módulo compartilhado, mas o next não aceita a importação, mas no expo tá de boa
O Chakra UI está sendo migrado para 4 novos projetos onde o principal é o Panda CSS. Você pode ler um pouco mais sobre aqui: www.adebayosegun.com/blog/the-future-of-chakra-ui
O complicado é fazer a empresa/empresas aceitarem essa belezura do NextJS. Agora vamos deixar um pouco de lado o código e falar sobre vagas. Tá esquisito as contratações em ...
O Axios usa a XMLHttpRequest por baixo dos panos ao invés da Fetch API e não é recomendado. Se você quer algo como o Axios mas que use a Fetch API e seja compatível com todas features do Next eu recomendo o: github.com/sindresorhus/ky
A OFERTA que TODO MUNDO não para de pedir será liberada: rseat.in/ENt90Atzj
Muita gente tinha criticado as mudanças do NextJs, mas o objetivo deles está bem claro já tem algum tempo. Eles estão trabalhando o framework para ser uma caixa de ferramentas que segue por aquela linha da citação de "baterias inclusas", porém muito mais amplo do que já era.
Não atoa eles subdividiram as responsabilidades para que isso fosse possível, sendo time next focado em funcionalidades de servidor, ferramental e desempenho, Tailwind para focar em estilização já nativa e o time do React com a responsabilidade de integrar o roadmap atualizado com as bibliotecas JS/TS, também focando em desempenho, compatibilidade e trazendo novas funcionalidades (muitas vezes alinhadas com a Vercel, principalmente por boa parte do time React original ter ido pra lá).
Apesar de a Vercel querer vender um produto com tudo isso no final, ainda assim você consegue pegar até uma VPS, subir a aplicação e rodar sem muita crise, porém claro que algumas questões de cache, segurança e algumas ferramentas como a otimização de imagens vão funcionar adequadamente só lá (não deixa de funcionar, mas requer mais processamento). Nesse exemplo das imagens, por exemplo, se não usar um worker externo conjunto a lib Sharp, tempo de build realtime das páginas adquiridas em pós processamento de build de aplicação acaba sendo afetado.
No final provavelmente o resultado é que você não vai precisar mais usar bibliotecas como a React Query (Tanstack), ou mesmo as libs externas de estados globais (Context Api não acho legal, aí ainda vale a pena usar um Redux ou Zustand da vida), e no max um ZOD para simplificar validação de tipagem e schemas das APIs do próprio framework (que também nasceram para matar o backend node apartado do front).
Obs: Não remove a necessidade de uso para apis comuns de conexões externas, como as de bancos de dados, AWS e algumas libs de observabilidade, porém essa implementação você pode isolar na camada de API do Next, ou rodar a partir de uma server action que já está trabalhando em uma camada isolada do frontend (eis aqui o medo de todo mundo quando os caras da Vercel botaram uma chamada de banco de dados ali dentro kkkkk)
e é opcional
Eu fico viajando do tanto de conhecimento e prática na área que esse cara tem..
né, o cara sabe muito, o tanto de tempo que ele passou estudando sozinho pra saber de tanto...
Ta tudo na doc. O Diego só foi lá, leu e resolveu gravar um vídeo pra quem não gosta de ler a documentação. Ele tem muito conhecimento pois parece ser um cara que sempre acompanha a evolução das stacks e tem coragem de ler as documentações. Quem somente acompanha vídeos jamais vai ter o conhecimento que ele tem.
@@raiure1 Não meu mano, não é "só porque ele leu um doc"
Presente professor! Muito boa a explicacao, confesso que nos projetos de Next 14 (ate entao) venho utilizando RSC apenas para carregar dados iniciais da tela. De certa forma, utilizando react-query, meu "data" nunca eh undefined!! Vou tentar aplicar esse novo "pattern" daqui pra frente e ver se me acostumo, abracos!!
Graaaaaande Fran! Obrigado pelo comentário, tamo junto parceiro!
Tá afim de meter as cara em Next.js, MongoDB, Fastify, Redis e Kafka na prática? CrazyStack Node e React do devdoido é a fita
Esse é o tipo de vídeo pra salvar em algum lugar, pra voltar aqui de novo
Essa aí do useFormStatus() com certeza vou precisar no futuro kkkkkk
Voltei ksks
a clareza do Diogo eh demais...ja fiz o curso deles uma vez e, logo mais vou assinar de novo
Tem novidades sobre isso (e algumas outras coisas) no blog do React, indicando o próximo lançamento, React 19.
video maravilhoso kkkkkk parabens mano. de hoje que eu to estudando next e sua didatica foi incrivel, parabéns.
Que vídeo bom! Cara, vc é incrível, tua forma de ensinar é tremenda!
Vim pegar um resumo de next, porque já trabalhei com react e fiz projetos pessoais com next pois na minha empresa era sem ele. Ai mudei de empresa e hoje nao uso mais React, só que não queria perder tudo de bagagem que eu tinha né, ai to aqui pra tentar pegar um resumo daas coisas hoje.
Sem condições cara :,( ....
Ele ja falou sei la quantos termos novos, e olha que nem parei de trabalhar com react faz tanto tempo. Eu percebi que se eu não quiser perder minha bagagem, vou ter q estudar react de novo como se nunca tivesse visto.
React, não sei os outros framew. pra frontend, está sem condições. É todo dia mil tech nova que surge, ao invés de evoluir oq já existe, acho que acaba sendo por isso que outras linguagens e ecossistemas tipo C# e Java acabam sendo mais maduros.
Obs.: adoro js
Mas ta sendo tanta revolução que daqui a pouco a gente volta pro começo da roda.
realmente belo vídeo, parabéns. Eu n cheguei ainda a usar o server actions e a mistura com esse fetch que fizeram explodiu minha mente
Isso abre um leque de possibilidade de novas API's onde, pode esconder certas requisições do cliente, isso vai prevenir muito de raspagem direto no end-point da aplicação.
Isso que achei surreal.
Cara, que conteúdo bom.
Continua trazendo novidades das ferramentas, por favor!
23:35 isso é muito legal mesmo, até começar a dar dor de cabeça com layout pulando pra todo lado 😅
Isso é chamado layout shift e é facilmente corrigido com o uso de Skeleton Screens :)
Suspense não é novidade, é do React e já existe tem um bom tempo.
mas isso acontece sem ou com o suspense, lol. A questão é tu saber implementar como vai a página/componente reagir a isso.
mano, cara é bom viu, espero um dia esta nesse nivel de conhecimento.
Massa bem explicativo!
Estou quebrando a cabeça com o RSC com uma questão re-rendering em uma aplicação com gráficos e precisa ter o estado no lado client para filtrar com base no período selecionado pelo usuário.
Não sei muito bem sobre sua dificuldade, mas você pode deixar o gráfico também com "use client" e assim controlar tudo via client-side.
Aula excelente como sempre Diegão! Valeu demais!
Aeee estava esperando por um vídeo br sobre o assunto, muito top!
Fala Diego, as actions ainda acho secas pra usar em produção, mas estou começando a usar a biblioteca next-safe-action que deixa a utilização delas mais robusta, daria um bom vídeo 👍🏼
O erro em 16:00 pra frente é que quando utiliza Server Action, não precisa especificar method e encType no formulario. Vc especificou method e não precisa, o nextjs já trata isso
18:20 Poderia só fazer um revalidatePath com o nome da rota, muito mais simples.
ótimo conteúdo, achei muito massa!
Está dando SSRF no semgrep-sast ao usar um fetch no auth.ts. Estou me autenticando usando API externa com o provider Credentials...
Opa, esse theme já tá diferente do theme que tava no video sobre seu VSCode, poderia dizer qual é esse?
Tô comendo agora no react to na parte de components !
Em um projeto rea e viável ficar usando componentes pra tudo?
Tip componentes pra Header,logo,navbar e exemplo carinho de compra 😅
Com o tempo vc vai preferir separar quase tudo em componentes kkkkk facilita muito a manutenção e entendimento do código
amei a aulaa!!
Onde ele faz essa live?
posso utilizar uma função para fazer CRUD no banco usando o use-server?
Eu posso usar esse Json serve para buscar dados? tenho um array de objetos cheio de dados e na página tenho que usar alguns desses dados dependendo do cliente. Ou melhor usar uma API local? Obs: se eu usar o Json serve na hospedagem vai funcionar normalmente em produção?
Cara fantástico... acredito que irá economizar muito tempo e linhas de código com isso.... por outro lado vc perde a visão do que está sendo feito por trás... talvez para dar suporte fique um pouco mais complicado se o dev não dominar o Next. Mas ótimo video. Super esclarecedor.
Eu quero uma maneira interessante para lidar com Access e Refresh Token.
Mesmo interceptando uma requisição do lado servidor, ao receber novos tokens não tem como atualizar os Cookies.
A única forma que encontrei foi fazer todas as requisições com Token pelo lado cliente e atualizar os Cookies.
Obs: API externa, nada de NextAuth.
Explicando em passo-a-passo:
Fazer login: POST /login
Recebe ACCESS e REFRESH
Guarda ambos nos Cookies
Passa um tempo
Faz request pelo lado servidor: ALGO /{algo}
Recebe um 403 (EXPIROU O ACCESS)
Intercepta e manda o REFRESH
Recebe tokens novos ACCESS e REFRESH
AI VEM O PROBLEMA
Se tentar atualizar os Cookies com next/cookies, Nookies, pela API através do retorno da request, ELE NÃO ATUALIZA OS Cookies
Se a requisição for do LADO CLIENTE ai é possível fazer essa atualização de COOKIES
A própria documentação do Next diz que é possível alterar os Cookies em alguns momentos, mas nem um deles serve pra uma requisição Fetch customizada ou Axios interceptando.
É possível usar o NextAuth com o provider credentials!
Poderia explicar mais? @@enriquesantosdeoliveira5798
@@enriquesantosdeoliveira5798 Poderia explicar melhor?
Serve pra API externa em Spring, node...
Eu também já tentei de tudo com uma API em node por fora e não consegui. Tive que colocar tudo use client.
Também estou fazendo dessa maneira. Pelo que eu vi, o NextAuth tá desencorajando usar o fluxo de credentials e por isso é limitado. Não tem a parte de refresh token :/
Ajudou a tirar umas dúvidas. Valeu.
No caso de um login por ex q retorna um token, eu consigo recuperar o retorno ou só mesmo usando api pra fazer assíncrono?
"Ah, não tem mais delay"... Triste realidade do ecossistema JS. Obrigado pelo vídeo e pelo conhecimento.
Uma pergunta :
a Suspense API representa a mesma coisa que a dynamic API ???
@Rocketseat, muito bom! pfv, qual extensao vc usa pro resultado do console.log aparecer na linha em q vc chamou?
console ninja.
Muito massa isso, mas como que isso ai funcionaria com react-hook-form?
Utilizando npm run dev funciona perfeitamente, porém, quando rodo o build (npm run build) aparece o seguinte erro: Module not found: Can't resolve 'react-server-dom-webpack/client' .A única diferença é que eu estou utilizando o useFormState do 'react-dom' para o tratamento de erros... Alguém sabe o que pode ser?
No nextjs14 nao existe mais os getserverprops getStaticProps?
ainda existem, mas não se você estiver usando App Router
Existem, mas o Next está fazendo uma transição dese modelo de getServerSideProps e getStaticProps para esse modelo que mostrei no vídeo. A grande motivação é que antes, no Next 12 pra baixo, todos componentes da aplicação eram componentes client-side e a gente apenas adicionava uma camada de servidor em alguns deles usando getServerSideProps. Agora, todos componentes são por padrão server-side, como se todos componentes já usassem getServerSideProps. E daí, os componentes que a gente precisa interação, a gente anota ele com o "use cliente", ou seja, é o caminho inverso.
@@dieegosfÓtima explicação,me ajudou demais
Perfeito@@dieegosf obrigado pela explicação. Inclusive eu parei no next12 em um projeto que eu fiz e não avancei mais, so estudei vendo alguns vídeos. Compensaria mudar o projeto, que é grande e roda em produção para o next14? ele é usado so como front e o back em laravel. Obrigado boa noite.
Ainda vou ver o Diego ensinando RemixJS
Qual TEMA é esse do VSCODE neste video ?
Vesper++
@@marcellodiniz🙌🚀🤝
Qual o nome dessa extensao do vscode que da pra ver o que vem do console.log no proprio vscode?
Console Ninja
@rocketseat Neste caso (que é similiar ao meu). Temos um servidor API e mais o servidor do Next.js. Usando "server components" não traria uma delay maior, uma vez que cada request do Client será mandada primeiramente para o servidor Next.js e este irá fazer uma request para o servidor API, tendo 2 requisições. Faz sentido usar "server components" e "actions" quando se tem um servidor de API separado?
essa é a mesma duvida que eu tenho e nao consigo achar nenhuma resposta decente na internet, a maioria vai só seguir examplos basicos de criar lista todo etc, nada que seja util pra producao. Nao entendo pq ninguem fala sobre isso, sera que geral usa nextjs como um framework fullstack? No meu caso, queria conectar o nextjs a minha api externa feita com spring boot mas estou tendo dor de cabeca :(
@@renanboni7636 A solução que encontrei é não mantendo isso numa Vercel + server separado para API. Se vc colocar todos os serviços (FE server + BE server + banco de dados) em uma VPC vc consegue tempo de latencia entre eles bem baixo. Caso sua aplicação não seja grande, vc pode considerar colocar tudo no mesmo servidor (sendo que nao irá precisar escalar). Mas caso dependa de serviços como Heroku + Vercel com certeza vai ter um tempo de latencia.
Minha dica é: Não deixei isso ser um problema e não perca tempo com isso agora, espera o problema de performance aparecer para entender como resolver no futuro se fizer sentido.
Diego, vc pode explicar melhor pq vc n usa server actions? O que está faltando nelas pra vc começar a usar? O que tem de ruim nelas?
Primeira coisa ruim é o tratamento de erros. Experimenta tratar erros com isso e você vai ver a dor. Mas do resto eu acredito ser bom.
@@luizfelipemachado mas pq o tratamento de erros é ruim?
@@lucascoliveira3957 Não tem como retornar do server actions uma response com statusCode. Basicamente é 200 ou 500. Se você lançar um erro, vai ser 500 com uma mensagem de erro. Essa mensagem de erro só funciona enquanto você esta no modo de desenvolvimento. Seria ótimo se funcionasse no modo de produção, mas por algum motivo a vercel remove a mensagem quando você builda a aplicação. Dito isso, a forma de você tratar erros então é retornar 200 no body um campo error ou semelhantes. Na prática, você pode e vai funcionar, porém o código fica muito mais verboso.
Tenho uma dúvida, com essa atualização do Nextjs 14 ainda devo usar React Query com Nextjs?
Sim, tem muitas coisas que são impossíveis de serem feitas de forma simples usando Server Components, por exemplo, paginação com scroll infinito, você provavelmente vai preferir usar o React Query, mas não só isso, toda vez que você precisar carregar dados em client components você vai recorrer ao React Query.
Qual o nome dessa extensão que mostra o console ?
console ninja
Com toda essa pegada de server components, consigo buildar normalmente um app com static site? Ou preciso necessariamente de um servidor node rodando junto?
Consegue sim: nextjs.org/docs/app/building-your-application/deploying/static-exports
Vejo esse video no momento que estou estudando requisições em APIs com Tanstack Query que seria uma opção melhor que usar o useEffect e vendo voce executar o fetch no proprio componente (com o recurso do async) me pergunto se devo deixar de lado o Tanstack porque um dos motivos que comecei a estudar essa forma de buscar dados em APIs eram as promessas de vantagens de isLoading, error, nao usar states, fazer o destructuring, etc.
ps: Faz mais exemplos com APIs externas (sem rodar um servidor localmente) se puder
claro q vale, projetos ainda estão como antes, ninguém vai atualizar tudo toda vez q sair algo novo.
Top... muito bom!
5:03 - como é que o console.log aparece no vscode?
É uma extensão do VSCode chamada console-ninja
Alguém sabe algum conteúdo em que mostra um form com use serve e salvamento dos dados em cookies?
Essa parada de escrever o componente no arquivo e ele automaticamente fazer o import é alguma extensão?
Não, o VSCode faz isso sozinho.
Qual extensão que faz isso do "preview" do que vai ser logado no console? Achei bem interessante
Console Ninja
Tu acha que o next vai se tornar um framework utilizado com muita frequência junto ao react?
Ou tem outros que prometem entregar mais!
Acho o next muito bom, a forma com que ele vem evoluindo e facilitando alguns pontos no desenvolvimento!
Meio que já é o padrão manin, e o recomendado pela própria doc do React
No momento são Nextjs, Remix e Expo. Nextjs é o mais popular
muito bom o conteudo ... fiz o codigo , e tentei fazer um botao excluir meus slugs, mas por estar do lado do servidor deu ruim, aguem aqui pode me ajudar
Poderia criar um projeto pra desenvolver um blog com N.Js
P****! Esse era O vídeo que eu queria ver
Que bom!
qual nome desse tema?
Vesper
@@dieegosfbaixei esse tema mas os nomes não são coloridos como no seu 🫠 eles ficam cinza
@@GuiZeroUm tenta o Vesper++
@@dieegosfÉ esse, ficou muito semelhante ao seu agora 😊
Qual é essa extensão que mostra o resultado do console.log sem precisar ir no browser?
console ninja, mas o nextjs aparece no terminal tbm
@@lsboissard obrigado mano, tava em dúvida feature do next
Como mudar os icons do apps no mac como o seu?
A aula foi top, mas eu fiquei me perguntando a mesma coisa hahaha
th-cam.com/users/shortsz0HhNZY7-fE?si=3en6B-14nmWfZXqH
Bem aqui: th-cam.com/users/shortsz0HhNZY7-fE?si=dPxB4ADm7xeYNX23
To me recusando a usar useState tendo FormData e Server Actions hoje em dia kk
É possível colocar uma meta tag orientation="portrait" no appRouter no next 14?
Não tem appRouter no next14
@@leonardoxavier2378Claro que tem cara
Como posso estar personalizando o meu vscode como o seu, em questão de temas, console e a forma como as pastas ficam
th-cam.com/video/TW3KoPkuWEA/w-d-xo.htmlsi=SSlh9zik2nOl-YSA
Ele mostra tudo nesse vídeo:
th-cam.com/video/TW3KoPkuWEA/w-d-xo.html
Só o tema que nesse vídeo ele usou um diferente. O nome é Vesper
@@umfilipe especificamente o Vesper++
Se dentro do componente do form você quisesse limpar o input, como você poderia fazer isso sem transformar ele em 'use client' ?
Você pode usar o "key" do React, ou seja, você faz a revalidação de uma página porque veio uma nova informação, com essa nova informação, você pode pegar o ID do primeiro registro ou do último (porque vai mudar) e usar como key que faz o componente atualizar: github.com/rauchg/emoji-todo/blob/main/app/page.jsx#L15
Que extensao e essa que o valor do debug no nextjs (server side) fica no proprio IDE... igual Quokkajs
Console Ninja
Não entendi mais compreendi. Amo código ❤
Pessoal, alguém sabe como criar um módulo npm que funcione no next, um contexto, preciso fazer um porte de next pra expo, e quero isolar os hooks e as interface GraphQL em um módulo compartilhado, mas o next não aceita a importação, mas no expo tá de boa
Crie um wrapper, e coloque "use client" importe provider de contexto dentro
@@lirrow-tworu2063 Obg meu jovem
qual o tema que o Diego está usando alguém sabe?
Vesper
Obrigado mano!@@dieegosf
@@dieegosf Um prefeito! 🙌❤🤝
Bom demais
Que navegador é este que vc usa?
Arc Browser
Diegão faz live?
Opa, faço sim, não muito regularmente, mas sempre na Twitch com usuário dieegosf.
Como eu utilizo Chakra Ui nessa nova versão do next?
O Chakra UI está sendo migrado para 4 novos projetos onde o principal é o Panda CSS. Você pode ler um pouco mais sobre aqui: www.adebayosegun.com/blog/the-future-of-chakra-ui
Cara, qual melhor opção pra fazer ui?
O complicado é fazer a empresa/empresas aceitarem essa belezura do NextJS. Agora vamos deixar um pouco de lado o código e falar sobre vagas. Tá esquisito as contratações em ...
é possivel usando axios?
Os metodos de cache do next lidam diretamente com a fetch api, eu acredito que nao
O Axios usa a XMLHttpRequest por baixo dos panos ao invés da Fetch API e não é recomendado. Se você quer algo como o Axios mas que use a Fetch API e seja compatível com todas features do Next eu recomendo o: github.com/sindresorhus/ky
@@dieegosf Consegui fazer com o Axios, porém precisa ajustar a tipagem do mesmo adicionando "next?: NextFetchRequestConfig" em "AxiosRequestConfig"
Muito bom...
Pena que mataram rotas dinâmicas em client side para output: 'export'
mt bom
Ainda prefiro o react hook form com zod
Achei bem complicadinho, essa parte sempre me confunde muito, server actions server components,
php
kkkkkkk
sim, um baita rodeio pra imitar nosso PHPzão
Laravel imbutido com front@@elvitin
É tudo um ciclo, daqui a pouco vai todo mundo perceber que estamos replicando os problemas do php e do asp e vamos voltar ao caminho natural hehe
ward