Eu RESUMI o Next.js 14 para você! (Server Components & Actions)
HTML-код
- Опубликовано: 5 окт 2024
- A OFERTA que TODO MUNDO não para de pedir será liberada: rseat.in/ENt90...
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
![Eminem - Temporary (feat. Skylar Grey) [Official Music Video]](http://i.ytimg.com/vi/ZaK9Wi5ho0o/mqdefault.jpg)
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
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.
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.
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
Cara, que conteúdo bom.
Continua trazendo novidades das ferramentas, por favor!
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.
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!
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.
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 👍🏼
ótimo conteúdo, achei muito massa!
@Rocketseat, muito bom! pfv, qual extensao vc usa pro resultado do console.log aparecer na linha em q vc chamou?
Ajudou a tirar umas dúvidas. Valeu.
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
Opa, esse theme já tá diferente do theme que tava no video sobre seu VSCode, poderia dizer qual é esse?
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.
Top... muito bom!
Ainda vou ver o Diego ensinando RemixJS
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
18:20 Poderia só fazer um revalidatePath com o nome da rota, muito mais simples.
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 :/
"Ah, não tem mais delay"... Triste realidade do ecossistema JS. Obrigado pelo vídeo e pelo conhecimento.
P****! Esse era O vídeo que eu queria ver
Que bom!
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.
amei a aulaa!!
posso utilizar uma função para fazer CRUD no banco usando o use-server?
Qual o nome dessa extensão que mostra o console ?
console ninja
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.
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
Uma pergunta :
a Suspense API representa a mesma coisa que a dynamic API ???
Está dando SSRF no semgrep-sast ao usar um fetch no auth.ts. Estou me autenticando usando API externa com o provider Credentials...
Poderia criar um projeto pra desenvolver um blog com N.Js
Muito massa isso, mas como que isso ai funcionaria com react-hook-form?
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?
Qual extensão que faz isso do "preview" do que vai ser logado no console? Achei bem interessante
Console Ninja
Qual TEMA é esse do VSCODE neste video ?
Vesper++
@@marcellodiniz🙌🚀🤝
Bom demais
Muito bom...
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?
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 😊
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 o nome dessa extensao do vscode que da pra ver o que vem do console.log no proprio vscode?
Console Ninja
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.
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
@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.
Não entendi mais compreendi. Amo código ❤
To me recusando a usar useState tendo FormData e Server Actions hoje em dia kk
mt bom
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?
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
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 ...
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
Diegão faz live?
Opa, faço sim, não muito regularmente, mas sempre na Twitch com usuário dieegosf.
Alguém sabe algum conteúdo em que mostra um form com use serve e salvamento dos dados em cookies?
Que extensao e essa que o valor do debug no nextjs (server side) fica no proprio IDE... igual Quokkajs
Console Ninja
qual o tema que o Diego está usando alguém sabe?
Vesper
Obrigado mano!@@dieegosf
@@dieegosf Um prefeito! 🙌❤🤝
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
Pena que mataram rotas dinâmicas em client side para output: 'export'
Como mudar os icons do apps no mac como o seu?
A aula foi top, mas eu fiquei me perguntando a mesma coisa hahaha
ruclips.net/user/shortsz0HhNZY7-fE?si=3en6B-14nmWfZXqH
Bem aqui: ruclips.net/user/shortsz0HhNZY7-fE?si=dPxB4ADm7xeYNX23
É possível colocar uma meta tag orientation="portrait" no appRouter no next 14?
Não tem appRouter no next14
@@leonardoxavier2378Claro que tem cara
Que navegador é este que vc usa?
Arc Browser
Ainda prefiro o react hook form com zod
Achei bem complicadinho, essa parte sempre me confunde muito, server actions server components,
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?
5:03 - como é que o console.log aparece no vscode?
É uma extensão do VSCode chamada console-ninja
Como posso estar personalizando o meu vscode como o seu, em questão de temas, console e a forma como as pastas ficam
ruclips.net/video/TW3KoPkuWEA/видео.htmlsi=SSlh9zik2nOl-YSA
Ele mostra tudo nesse vídeo:
ruclips.net/video/TW3KoPkuWEA/видео.html
Só o tema que nesse vídeo ele usou um diferente. O nome é Vesper
@@UmFilipe especificamente o Vesper++
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
é 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"
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