Não tem como...seja bem-vindo Next.js ao meu leque de tecnologias. Está impossível não investir tempo e esforço no Next.js, sério. Agradeço a Rocket, Diego, Rodão e João pelo vídeo. Para dale então, o meu top 1 é o: `next/image`
Nextjs 10 tá show! A feature "Built-in Image Component and Automatic Image Optimization" foi a q mais gostei, já coloquei até em produção 😊. Até então eu tinha criar cloud functions para otmizar as imagens on the fly ou durante o upload, ou usar algum serviço de otimização como o Cloudinary, CloudImage, o q poderia acabar aumentando o custo da aplicação. Agora a Vercel resolveu nosso problema 😊 Vale resaltar q essa otimização não faz crop na imagem, ou seja, uma imagem 800x800 sempre terá uma proporção 1:1, se você passar o tamanho 400x200 nas propriedades do componente , sua visualização será de 400x200 (2:1) , mas a imagem ainda manterá a proporção original 1:1, isso pq o next redimensiona a imagem baseado apenas no width.
@@JanderSilva01 O padrão do Next é usar as imagens dentro da pasta public. Caso vc queira importá-las de outras pastas é necessário instalar a lib next-images. Depois disso é só importar as imagens da mesma forma q é feita com os componentes. Essa lib tem vantagens, como o fato de transformar as imagens pequenas em base64 e colocá-las "inline" dentro do html, evitando requisições no servidor
Ainda bem que temos a Vercel no React fazendo o que o papel de um core team que o Facebook não faz. Assim sobe o nível do React e deixa a nível de igualdade ou acima a outras soluções.
Testei o novo componente Image em um projeto meu que usa tailwind e a estilização da img tudo feito por classe do tailwind e quando testei não tive resultado bons. Não consegui passar o tamanho desejado que estava antes para as props width e height
Então não é um simples componente, vem junto com um handler no servidor que faz a otimização delas on-demand? Sensacional. Eu perdi dias criando uma AWS lambda pra fazer otimização de imagem há uns anos atrás.
Faaaala, Joelson! 🚀 É o Kubuntu personalizado! Dá uma olhadinha aqui: th-cam.com/video/h-FsG-QpgfI/w-d-xo.html Nosso querido Rodz mostra o passo a passo! 💜
Faaaala, Rômullo! 🚀 Segundo a documentação do próprio Next, é recomendado sim, hostear na Vercel mas não é obrigatório! Então, provavelmente, você consegue usar sim! 😉 💜
O novo fallback: blocking consegue fazer tratativa de erros para retornar 404 caso não encontre a página solicitada? No unstable blocking eu precisei montar todo um sistema personalizado para a tratativa de erros, pois o original renderiza a página 404, mas com retorno 200 do servidor, o que não é o ideal
@@RodrigoAlmeida22 Infelizmente sim, vou criar um artigo no Medium então explicando como eu fiz para conseguir isso usado o fallback blocking. Pois o fallback false precisa rebuildar a página para atualizar as possibilidades de rota, montando o artigo eu posto aqui. Obrigado Rodrigo
@@RodrigoAlmeida22 Acabei de finalizar o artigo no Medium explicando como fazer para retornar 404 usando o Fallback Blocking victorthadeu-66076.medium.com/how-to-return-404-while-using-fallback-blocking-in-next-js-6fda63aad818
@@thadeucity Parabéns pelo artigo cara!. Eu testei sua solução e ela funcionou certinho. Porém acabei usando uma solução q encontrei na doc da Vercel nextjs.org/docs/advanced-features/i18n-routing#non-dynamic-getstaticprops-pages. Apliquei ela nesse site valormaior.com/, também funcionou perfeitamente
Salve galera! Tenho sido muito grato por vários vídeos aki do canal, e hoje conheci o app da Rocketseat. Só q um colega me indicou um que só assisti quem tá no nível expert. Como faz pra chegar lá?
Next.js é um framework React, mas, se você criou o seu projeto com create-react-app, precisa migrar completamente para Next.js (não tem como migrar aos poucos)
Fala dev!!! Parabens pelo otimo trabalho. Uma duvida: Vale a pena usar a api do next para fazer coisas complexas como chamadas em bancos de dados etc...(substituindo o back-end em nodejs) ?????
Com certeza, a API Routes tem exatamente essa finalidade. Lembrando que não é necessariamente um substituto, cada caso é um caso, vai depender da sua necessidade.
Faaaala, Robson! 🚀 Conversei com o pessoal aqui e a maioria nunca ouviu falar sobre o Meteor! 😥 Dei umas pesquisadas e encontrei esse artigo: medium.com/@caseygibson_42696/why-ill-be-using-meteorjs-in-2020-a588da57cb29 Mas se você se sentir confortável e quiser nos falar mais sobre! Fique a vontade! 😉 💜
HAHAHAHAHAH sim! Mas, olha, por você, fui mais afundo e conversei com o nosso querido CEO, Robson, pra conseguir uma boa resposta! 💜 Ele me disse que o Rocket.chat foi construido utilizando o Meteor.js mas deu muito trabalho pra escalar então eles estão migrando pra Node + React! Inclusive, outros produtos passaram pelo mesmo problema, então acredito que dependa muito do caso de uso! 😥 Resumindo, ainda se usa mas o hype grande que tinha em cima dele, não tem mais! 😉 Você pode dar uma olhadinha nesse vídeo: th-cam.com/video/BOWdx4rLwXg/w-d-xo.html em que o Diego bate um papo com a Rocket.Chat! Agora sim eu acho que te dei uma boa resposta! HAHAHAHAHA Valeeeu, Robson! Abraços! 💜
alguém me helpa por favor... estava começando a aprender Gatsby agora, mas depois de assistir esse vídeo fiquei na dúvida. ainda vale a pena aprender Gatsby agora, ou NextJs eh uma melhor opção?
Fala Joneivison! Seria isso? getServerSideProps: é o server side render getStaticProps: é o static generator getStaticPaths: para usar o static generator e quando há muitas páginas, cria as páginas dinamicamente Entendi bem sua dúvida?
gostei da parte do link e da otimização das imagens Automatic Resolving of href: The as property is no longer needed on next/link Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component
A tecnologia parece andar em ciclos. No início dos tempos (rss) haviam linguagens de cliente: HTML, um pouquiiiinho de javascript e a estilização era inline. Também haviam as linguagens de servidor, geralmente PHP ou ASP e o comum era ter tudo misturado, back e front pois o servidor compilava essa salada de te cuspia um HTML com tudo pendurado. Depois de tanta treta ao debugar o moderno virou separar as responsabilidades: HTML descreve, CSS estiliza, e o JS cria comportamento. Então o front era quase totalmente desacoplado do backend. Depois veio as API's e os micro serviços tudo separadinho, tudo lindo. Daí vieram as bibliotecas SPA e ferramentas CSS in JS e misturou tudo de novo, mas a renderização ainda era separada e agora com SSG voltou tudo como era antes, HTML, CSS, JS e renderização tudo no mesmo lugar. Não duvido nada que daqui a pouco separem tudo de novo.
o next aborda entre outras coisas o SSR que otimiza e muito a entrega de informações do seu site ao navegador além de melhorar no SEO de alguns crawlers principalmente de redes sociais, já que o google atualmente consegue indexar CSR, mas de forma simples vc precisa entender como o Next funciona e caso vc já tenha esse conhecimento pode decidir se vai usar ou não com base no que vc quer desenvolver, eu por exemplo fiz um sistema web para gerenciamento de uma empresa usando CRA pq não precisava de SEO nem nada do tipo, mas isso foi no começo do ano, enfim, muita coisa mudou, sempre vai da necessidade, a casos de uso para ambas as formas de começar um projeto
@@gabrieltana Como o rodrigo disse aí, da sim, mas se vc vai deixar de usar uma funcionalidade do framework pq vc nao precisa dela pra resolver seu problema, talvez seja o caso de usar uma ferramenta que resolva melhor, eu mesmo se fosse pra nao fazer SSR, manteria usando o CRA
@@mateuspamaral00 Aparentemente tu não tá seguindo a glr da Rocket no Twitter cara, mas devia. Birobirobiro, Rodão, Luke Morales, até o Diego comentou sobre o lançamento
@@TheJoniplay Eu acredito que sim! Eu gosto demais da interface dele, além de que senti um ganho de performance gigante em relação ao Chrome (apesar de ter gente que fala que não existe essa diferença)
Top 1 pra mim foi o i18n, fui implementar uma vez e foi bemmm chatinho. Não me arrependo em nada de ter escolhido o React e ter começado a usar o Next e o Gatsby. (também estou de olho e brincando com outros frameworks, claro)
Só eu fico aflito com o cara Pronunciando inglês certinho e o restante em português. Ele é tão nojento que da até uma pausinha pra pronunciar kkkkkkkkkkk
Bravo, Bravíssimo! O meu top 1 é o: Image blocking fallback commerce!😅
@@rodz 😂
ta mais quem e RODAO? kkkkkk
instablaster.
Trás um projeto prático legal 100% NextJS (back e front) pra nós treinarmos e colocar no portfólio 😉
O Next foi longe demais, conseguiu tirar o João Pedro do hype do Gatsby
É muito divertido ver o Diego pai e os Diegos filhos falando: 'Sensacional'. Hhahah boa rapaziada! Dicas tops demais 🤓🚀👏
Excelente conteúdo! Esse sotaque de falar “bara” ao invés de “barra” me lembra a infância com meus primos.
Showwww!!!!!! Nada melhor como conteudo para agregar e pra manter os devs atualizado!!
Finalmente! Depois dessa conferência, eu fiquei muito, mas muito no hype com o next 10
Não tem como...seja bem-vindo Next.js ao meu leque de tecnologias. Está impossível não investir tempo e esforço no Next.js, sério.
Agradeço a Rocket, Diego, Rodão e João pelo vídeo. Para dale então, o meu top 1 é o: `next/image`
Os kra são brabo! É isso
Nextjs 10 tá show! A feature "Built-in Image Component and Automatic Image Optimization" foi a q mais gostei, já coloquei até em produção 😊.
Até então eu tinha criar cloud functions para otmizar as imagens on the fly ou durante o upload, ou usar algum serviço de otimização como o Cloudinary, CloudImage, o q poderia acabar aumentando o custo da aplicação. Agora a Vercel resolveu nosso problema 😊
Vale resaltar q essa otimização não faz crop na imagem, ou seja, uma imagem 800x800 sempre terá uma proporção 1:1, se você passar o tamanho 400x200 nas propriedades do componente , sua visualização será de 400x200 (2:1) , mas a imagem ainda manterá a proporção original 1:1, isso pq o next redimensiona a imagem baseado apenas no width.
Rodrigão, como importar a imagem pro src do next/Image? Pra não ter que colocar as imagens no public.
@@JanderSilva01 O padrão do Next é usar as imagens dentro da pasta public. Caso vc queira importá-las de outras pastas é necessário instalar a lib next-images. Depois disso é só importar as imagens da mesma forma q é feita com os componentes. Essa lib tem vantagens, como o fato de transformar as imagens pequenas em base64 e colocá-las "inline" dentro do html, evitando requisições no servidor
Quero começar a testar esse NextJS, muito massa o video, Rocketseat mandando bala como sempre !!
Ainda bem que temos a Vercel no React fazendo o que o papel de um core team que o Facebook não faz. Assim sobe o nível do React e deixa a nível de igualdade ou acima a outras soluções.
what a time to be a dev
Testei o novo componente Image em um projeto meu que usa tailwind e a estilização da img tudo feito por classe do tailwind e quando testei não tive resultado bons. Não consegui passar o tamanho desejado que estava antes para as props width e height
Next ta next mesmo tá maluco KKKKK vi a conf e hypei igual a galera
Muito legal a discussão, o meu top 1 por enquanto é o "Built-in Image Component and Automatic Image Optimization"
três monstros falando sobre nextJS
A melhor parte do NextJS é ser muito fácil de usar e aprender.
Excelente video! Parabéns!
Qual a distro do linux que vocês estão usando ??
Tem como eu usar essas tecnologias novas em plataformas sem acesso ao backend?
Trio parada dura estes são feras ..!!!
Conteúdo incrível e de qualidade e mesmo sem querer me ajudou de mais só em comentar o react-i18next kkk, parabéns!
Partiu next.js
Ansioso pra desenvolver algo com essa versão 10. Baita ferramenta!
Então não é um simples componente, vem junto com um handler no servidor que faz a otimização delas on-demand? Sensacional. Eu perdi dias criando uma AWS lambda pra fazer otimização de imagem há uns anos atrás.
muito top o next 10. O meu top é o: Image blocking fallback
Poxa! Cadê esse curso de ecommerce com nextjs?
E o Rodão kkkk Diego não perdeu a oportunidade
Qual a versão desse linux?
Faaaala, Joelson! 🚀
É o Kubuntu personalizado!
Dá uma olhadinha aqui: th-cam.com/video/h-FsG-QpgfI/w-d-xo.html
Nosso querido Rodz mostra o passo a passo! 💜
caramba estou sofrendo para conseguir as variaveis locais do Ecommerce, alguem poderia explicar onde eu pego elas?
Só da pra usar o Next Analytics se o site com Next estiver hosteado na Vercel ? Se estiver hosteado na AWS então não tem como eu usar o Analytics ?
Faaaala, Rômullo! 🚀
Segundo a documentação do próprio Next, é recomendado sim, hostear na Vercel mas não é obrigatório!
Então, provavelmente, você consegue usar sim! 😉 💜
O novo fallback: blocking consegue fazer tratativa de erros para retornar 404 caso não encontre a página solicitada? No unstable blocking eu precisei montar todo um sistema personalizado para a tratativa de erros, pois o original renderiza a página 404, mas com retorno 200 do servidor, o que não é o ideal
Só o "fallback: false" retorna o erro 404 de verdade
@@RodrigoAlmeida22 Infelizmente sim, vou criar um artigo no Medium então explicando como eu fiz para conseguir isso usado o fallback blocking. Pois o fallback false precisa rebuildar a página para atualizar as possibilidades de rota, montando o artigo eu posto aqui. Obrigado Rodrigo
@@RodrigoAlmeida22 Acabei de finalizar o artigo no Medium explicando como fazer para retornar 404 usando o Fallback Blocking
victorthadeu-66076.medium.com/how-to-return-404-while-using-fallback-blocking-in-next-js-6fda63aad818
@@thadeucity Parabéns pelo artigo cara!. Eu testei sua solução e ela funcionou certinho. Porém acabei usando uma solução q encontrei na doc da Vercel nextjs.org/docs/advanced-features/i18n-routing#non-dynamic-getstaticprops-pages. Apliquei ela nesse site valormaior.com/, também funcionou perfeitamente
Não tem como não "hypar" num update desse.
Salve galera! Tenho sido muito grato por vários vídeos aki do canal, e hoje conheci o app da Rocketseat. Só q um colega me indicou um que só assisti quem tá no nível expert. Como faz pra chegar lá?
o Next Analytics seria algo semelhante ao New Relic?
qual é esse sistema operativo ?
Tá, vocês falaram tudo sobre as novas funcionalidades do Next, mas não responderam, quem é Rodão?
😂
Ele ta no video o Rods e o RODÃO
🤭🤭
Top demais.
Eu tive problema com variáveis de ambiente e privatizar rotas no NextJS, esse NextJS 10 tá uma delicinha
Pessoal, fiquei com uma dúvida, é possível incluir Next em um projeto React já que no final Next é React ou nem faz sentido isso ?
Next.js é um framework React, mas, se você criou o seu projeto com create-react-app, precisa migrar completamente para Next.js (não tem como migrar aos poucos)
@@jpedroschmitz valeu 👍🏼
Trás um projeto prático legal 100% NextJS (back e front) pra nós treinarmos e colocar no portfólio 😉
Qual a distro do Diego?
Se eu não me engano é o Ubuntu com KDE, tem até alguns vídeos no canal do Rodz mostrando como customizar
Fala dev!!!
Parabens pelo otimo trabalho.
Uma duvida:
Vale a pena usar a api do next para fazer coisas complexas como chamadas em bancos de dados etc...(substituindo o back-end em nodejs) ?????
Com certeza, a API Routes tem exatamente essa finalidade. Lembrando que não é necessariamente um substituto, cada caso é um caso, vai depender da sua necessidade.
Eu jurava que o Joao Pedro e o Rodz eram a mesma pessoa.
ORA ORA DESCOBRIMOS QUEM É O RODÃO
Ainda se usa Meteor.js ?
Faaaala, Robson! 🚀
Conversei com o pessoal aqui e a maioria nunca ouviu falar sobre o Meteor! 😥
Dei umas pesquisadas e encontrei esse artigo:
medium.com/@caseygibson_42696/why-ill-be-using-meteorjs-in-2020-a588da57cb29
Mas se você se sentir confortável e quiser nos falar mais sobre! Fique a vontade! 😉 💜
@@rocketseat vocês são novos, por isso... hahah brincadeira. Era um raio de frameword hibrido para web, mobile, foquete da nasa....
@rocketseat abçs
HAHAHAHAHAH sim!
Mas, olha, por você, fui mais afundo e conversei com o nosso querido CEO, Robson, pra conseguir uma boa resposta! 💜
Ele me disse que o Rocket.chat foi construido utilizando o Meteor.js mas deu muito trabalho pra escalar então eles estão migrando pra Node + React!
Inclusive, outros produtos passaram pelo mesmo problema, então acredito que dependa muito do caso de uso! 😥
Resumindo, ainda se usa mas o hype grande que tinha em cima dele, não tem mais! 😉
Você pode dar uma olhadinha nesse vídeo: th-cam.com/video/BOWdx4rLwXg/w-d-xo.html em que o Diego bate um papo com a Rocket.Chat!
Agora sim eu acho que te dei uma boa resposta! HAHAHAHAHA
Valeeeu, Robson!
Abraços!
💜
@@rocketseat vlw
Diegão ta hypadão
Vai ter Next nas proximas atts do bootcamp?
Tem um bônus no GoStack
Belo video, mas quem é rodão?
Galera, e se, eu importar a imagem via CSS, como um background por exemplo? #PR
alguém me helpa por favor... estava começando a aprender Gatsby agora, mas depois de assistir esse vídeo fiquei na dúvida. ainda vale a pena aprender Gatsby agora, ou NextJs eh uma melhor opção?
Next
Fala dev!!!
Parabens pelo otimo trabalho.
Uma duvida:
Qual a ordem das funções do next, como a getStaticProps etc...???
Fala Joneivison! Seria isso?
getServerSideProps: é o server side render
getStaticProps: é o static generator
getStaticPaths: para usar o static generator e quando há muitas páginas, cria as páginas dinamicamente
Entendi bem sua dúvida?
Top, é correto dizer que o "Next Analytics" tem a mesma função do "New Relic"? se sim, qual seria melhor?
gostei da parte do link e da otimização das imagens
Automatic Resolving of href: The as property is no longer needed on next/link
Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component
Seria pedir muito pra essa lojinha ser codada ao vivo? heh
Sugestão anotadíssima, João! 💜 🚀
Tá difícil pro Nuxt acompanhar a velocidade de evolução que o Next tem 😬 🚀
Built-in Image Component and Automatic Image Optimization
João Pedro Schmitz tem parentesco com Daniel Pace Schmitz?
Qual a opinão de vocês sobre o Remix?
O problema é que NextJS ta ficando tão bom, que da vontade de usar full para todas soluções até mesmo para soluções que não precisam de SSR.
Quem é Rodão?
A tecnologia parece andar em ciclos. No início dos tempos (rss) haviam linguagens de cliente: HTML, um pouquiiiinho de javascript e a estilização era inline. Também haviam as linguagens de servidor, geralmente PHP ou ASP e o comum era ter tudo misturado, back e front pois o servidor compilava essa salada de te cuspia um HTML com tudo pendurado. Depois de tanta treta ao debugar o moderno virou separar as responsabilidades: HTML descreve, CSS estiliza, e o JS cria comportamento. Então o front era quase totalmente desacoplado do backend. Depois veio as API's e os micro serviços tudo separadinho, tudo lindo. Daí vieram as bibliotecas SPA e ferramentas CSS in JS e misturou tudo de novo, mas a renderização ainda era separada e agora com SSG voltou tudo como era antes, HTML, CSS, JS e renderização tudo no mesmo lugar. Não duvido nada que daqui a pouco separem tudo de novo.
Diego, desculpa o comentário fora do tema, mais pq vc fala "Eita Geovana"? kkk 🤔. Muito bom o conteúdo, parabéns
"eita giovana o forninho caiu" hehehe cola isso na pesquisa do youtube kkk
@@maykbrito kkkk, não sabia dessa! Abração Maikao
@@ganhecomarede kkkk Abração
Falta só um CMS pra bater o Wordpress.
Next substitui 100% o CRA? #PR
o next aborda entre outras coisas o SSR que otimiza e muito a entrega de informações do seu site ao navegador além de melhorar no SEO de alguns crawlers principalmente de redes sociais, já que o google atualmente consegue indexar CSR, mas de forma simples vc precisa entender como o Next funciona e caso vc já tenha esse conhecimento pode decidir se vai usar ou não com base no que vc quer desenvolver, eu por exemplo fiz um sistema web para gerenciamento de uma empresa usando CRA pq não precisava de SEO nem nada do tipo, mas isso foi no começo do ano, enfim, muita coisa mudou, sempre vai da necessidade, a casos de uso para ambas as formas de começar um projeto
@@kenedyribeiro1390 Queria saber sobre usar o Next apenas para SPA, renderizado no client side
@@gabrieltana Sim substitui, da pra fazer a renderização no client apenas, caso assim vc deseje
@@gabrieltana Como o rodrigo disse aí, da sim, mas se vc vai deixar de usar uma funcionalidade do framework pq vc nao precisa dela pra resolver seu problema, talvez seja o caso de usar uma ferramenta que resolva melhor, eu mesmo se fosse pra nao fazer SSR, manteria usando o CRA
Rodao do bigodão
Rodão 😂
Code drops tá mudando um pouco o formato ou é impressão minha?
e-Commerce com #VTEX
Rodz com o bigodin de bandido
Estou em busca de especialistas em desenvolver um app em cima do commerce
Pô, Diego, mete um Edge logo nesse Linux aí!
Edge ta valendo mais a pena?
edge nao tem para linux
@@mateuspamaral00 tem sim.
Eu estou usando no Mint.
@@mateuspamaral00 Aparentemente tu não tá seguindo a glr da Rocket no Twitter cara, mas devia. Birobirobiro, Rodão, Luke Morales, até o Diego comentou sobre o lançamento
@@TheJoniplay Eu acredito que sim! Eu gosto demais da interface dele, além de que senti um ganho de performance gigante em relação ao Chrome (apesar de ter gente que fala que não existe essa diferença)
Top 1 pra mim foi o i18n, fui implementar uma vez e foi bemmm chatinho.
Não me arrependo em nada de ter escolhido o React e ter começado a usar o Next e o Gatsby.
(também estou de olho e brincando com outros frameworks, claro)
João Pedro Scmitz === Ben Awad
HAHAHA
Eu sou muito preguiçoso, fazer um PWA no gatsby é muito mais simples que no nextjs
Maioria dos browser suporta webp, menos Safari xD
2019 ano do Gatsby, 2020 do NextJS... 2021 vai ser Nextby ou GaxtJS! lol
Web só tá começando!
Meu top 1 é igual ao do @maykbrito
UI CLONE COM NEXT.js ou eu vai merda ......
Só eu fico aflito com o cara Pronunciando inglês certinho e o restante em português. Ele é tão nojento que da até uma pausinha pra pronunciar kkkkkkkkkkk