Creating a new React project?! Watch this video first (new React documentation).

Поділитися
Вставка
  • Опубліковано 23 бер 2023
  • One thing you can be sure of is that Diego will always bring us the biggest and best updates from the React universe. And this time is no different.
    If you haven't been living in an isolated bubble this week, you've probably heard about the new React documentation. It brings some changes when it comes to starting your development.
    The other news involves Tailwind CSS, have you heard about it yet?
    Well, he covers everything you need to know about these updates in today's video.
    Let's check it out 🚀

КОМЕНТАРІ • 297

  • @eligarciajunior5570
    @eligarciajunior5570 Рік тому +22

    Eu experimentei o uso do React com o Vite, e até o momento estou gostando muito, até porque não é muito diferente do Create React App. Acho que é o framework mais amigável para os iniciantes.

    • @joao-lucky
      @joao-lucky 10 місяців тому

      tbm to achando, mas eu fico na duvida se é viavel ou sou obrigado a ir para o next de cara

    • @Franklin7x
      @Franklin7x 7 місяців тому

      @@joao-lucky estou indo no vite, acredito que é muito utilizado ainda e com o tempo e tiver uma base mais solida podemos ir para o next sem pular etapas (não colocar os bois na frente da carroça)

  • @AriMauricio
    @AriMauricio Рік тому +4

    1:42 - concordo. O Ruby e o Rails estão conectados pelo on

  • @gabriellennon8959
    @gabriellennon8959 Рік тому +2

    Muito top vídeos assim trazendo sobre as novidades do react, valeu diegao !

  • @giiuseppe82
    @giiuseppe82 Рік тому +20

    Top o video. Acho que eh valido vc fazer um video aprofundando mais nessa parte de CSS que vc comentou!!! vai ficar bem legal

  • @marcosparanhos2854
    @marcosparanhos2854 Рік тому +1

    Muito bom saber dessas informações, estou iniciando no mundo da programação front-end e me identifiquei com o React, já estava querendo começar a estudar o next msm, apenas mais um incentivo! Obrigado pelo vídeo!

  • @AdsonCicilioti
    @AdsonCicilioti Рік тому +1

    QUe bom que tocou nesse assunto Diegão... Parecia que eu estava sofrendo sozinho com essa história de CSS tool ZERO runtime... Estou exatamente neste momento trocando o Stitches pelo vanilla-extract. Se puder traga mais abordagens sobre o assunto. Valew sucesso!

  • @carlosmecao22
    @carlosmecao22 Рік тому +2

    Diego, se poder traga mais videos abordando conteúdos do vanilla extract

  • @igorthierry
    @igorthierry Рік тому +2

    lembro do GoStack, quando estava aprendendo a criar um projeto react na mão kkkkk foi sofrido mas foi um baita aprendizado.

  • @raimundojunior8547
    @raimundojunior8547 Рік тому

    valeu por esclarecer Diegão.
    Muita informação boa

  • @ednilsonaraujo3059
    @ednilsonaraujo3059 9 місяців тому +1

    Olá. Cai aqui por acaso. Já estudo nextjs. Tema muito importante. Não conhecia essa necessidade de Zero-Runtime CSS. Vou me aprofundar nesse tema. Mais um inscrito.

  • @jonilsoncoelho8930
    @jonilsoncoelho8930 Рік тому

    Muito bom! Obrigado pela contribuição

  • @antoniogleisonpintoviana9399
    @antoniogleisonpintoviana9399 Рік тому +1

    Muito bom Diego. Sempre trazendo novidades.

  • @arsnakehert
    @arsnakehert Рік тому +2

    Só comentar que a documentação nova em si é incrível

  • @manoellopes211
    @manoellopes211 Рік тому +5

    Mais conteúdo de Remix aqui no UA-cam, no Ignite e no Plus seria bem massa

  • @alberto3641
    @alberto3641 Рік тому

    Fogoooo no parquinho!! 🔥🔥🔥
    Meu TailwindCSS vai brilhar! E NextJS chegou pra ficar HÁ MTO tempo

  • @brnbk8910
    @brnbk8910 Рік тому +2

    Estudo react a um ano por aí, tenho um app publicado e tô trabalhando em outro, curti muito o react native, não quero parar de usar kkk

  • @paulocbbf
    @paulocbbf Рік тому +30

    É preciso diferenciar a arquitetura MPA/SPA de interatividade MPA/SPA. Nextjs é construído para não seguir uma experiência SPA, porém pode sim oferecer esse tipo de experiência.
    Seria legal um vídeo para diferenciar tudo isso. Uma diferenciação mais "hands-on" de um CRA para Nextjs do ponto de vista de interatividade. A sensação que dá com todo esse movimento é como se não fossem existir mais interações SPA, como se os webapps não fossem mais "apps", e isso não é verdade. Muitos apps no mercado oferecem esse tipo de interatividade e continuarão assim. Com React ou sem React.

    • @wfl-junior
      @wfl-junior Рік тому

      Em algum momento faz full refresh nos seus apps em Next?

    • @rdxtn
      @rdxtn Рік тому

      Exato

    • @pablohenrique2537
      @pablohenrique2537 Рік тому +1

      Pelo que vi especificamente do Remix, ele tem a mesma experiência de um SPA(Sem full refresh) e ao mesmo tempo é renderizado no servidor, isso fritou minha cabeça porque não achei que fosse possível um SSR com experiência de "SPA"

  • @danilosampaio1756
    @danilosampaio1756 Рік тому

    Show boas informações.

  • @victoralmeida1583
    @victoralmeida1583 Рік тому +1

    Finalmente uma orientação mais profissional de uso da ferramenta.
    Até pra iniciantes eu vejo vantagem, pois para a enganação de que é só sacudir uns hooks aqui e alí, e vc tem um app pronto pro mercado.

  • @devjunioralves
    @devjunioralves Рік тому +7

    A documentação do React em sim ta sensacional. Com vários exemplos interativos, completamente focada nos hooks e com excelentes explicações.
    Sobre o Vite, concordo muito com o que você disse.

    • @alisonhj
      @alisonhj Рік тому +4

      Só tenho receio com os hooks novos, pois lançaram uns novos que eu to tendo dificuldade pra entender bem.
      Uma pessoa que é MUITO fera e é referência já em React pra aprender conceitos avançados em inglês é o "Jack Herrington:
      www.youtube.com/@jherr (sério quem souber inglês confira o canal dessa lenda!)

    • @devjunioralves
      @devjunioralves Рік тому +2

      @@alisonhj O Jack é um mostro, recomendo muito também!
      Sobre os hooks, poderia citar quais esta com dificuldades?

  • @amirawebsystems5217
    @amirawebsystems5217 Рік тому

    Muito bom o video , eu estou usando só VITE ... urgh.... Vamos já pensar em NEXT .. !!! Diego , faz um video de NEXT e de como configura o Tailwind pra ajudar a gente a migrar .. !!!!

  • @machadoviewer
    @machadoviewer Рік тому +1

    Esse vídeo chegou bem na hora pra mim

  • @iftarodrigues
    @iftarodrigues Рік тому

    Fui criar um projeto hoje e não tava entendendo por que tava colocando o next obrigada pelo vídeo

  • @monteiro_ops
    @monteiro_ops Рік тому

    Fala Diegão, por enquanto as unicas grandes diferenças são a modificação pelo tailwind e os server components, estou acompanhando a pasta app está entrando no gosto do pessoal, mas referente ao uso de NextJS, acredito que o mercado já estava migrando para NextJS pela simplicidade, mas a minha pergunta é: vocẽ acredita que vamos voltar a ter uma aplicação com a ideia de monolito? ou frameworks fullstacks como NextJS vão voltar a funcionar com força, mas permitindo acesso a api?
    Gosto muito de trabalhar com NextJS e dificilmente utilizo outros serviços como back-end, atualmente só utilizo algumas funcionalidades de apis externas e crio apis de ML em python para servir o front, mas segue o padrão de React com NextJS e ReactNative dominando.

  • @vitormelo22
    @vitormelo22 Рік тому +4

    Libs como jQuery e Angular ainda são extremamente utilizadas no mercado. Aos poucos a tecnologia muda. Felizmente e infelizmente é uma questão de tempo ver que as novidades que fizeram o React crescer, serem as mesmas que irão estagná-lo com relação a novos frameworks como o Svelte e o SolidJS e assim sucessivamente. Creio que o Typescript seja um dos poucos que tende a perdurar por mais tempo.

  • @erialdod.freitas4007
    @erialdod.freitas4007 Рік тому +4

    1:45 Algo parecido acontece na stack Dart/Flutter. Hoje em dia o framework já vem logo de cara para quem quer iniciar o desenvolvimento.

    • @MarcosAlmeida-pn6sp
      @MarcosAlmeida-pn6sp 5 місяців тому

      n fala bosta, o dart é uma linguagem de programação utilizada pra codificar no flutter, o flutter sim é um framework.
      o que vocÊ tá dizendo é como se o javascript/react fosse a mesma coisa, mas o next sim é um framework.

    • @erialdod.freitas4007
      @erialdod.freitas4007 4 місяці тому

      @@MarcosAlmeida-pn6sp Calma princeso. Já programei em Dart/Flutter (inclusive dei apoio no desenvolvimento de aplicativo que está na Google play store) e com um pouco da stackJS/TS/React também, então sim, eu sei que o Flutter e NextJs são frameworks. Quis dizer que agora com essa recomendação da comunidade React para utilizar um framework para desenvolver aplicações, vai ficar parecido com o que acontece com a stack Dart/Flutter, onde normalmente se inicia estudando os dois juntos, e principalmente agora, que é possível desenvolver para Web e Desktop com flutter. Interprete melhor as coisas, para não querer vir bancar de sabichão na internet

  • @lucasribeiro5238
    @lucasribeiro5238 Рік тому +1

    Eu sempre fui fã de usar esses frameworks como o next e nuxt, eles agragam de mais na tecnologia que você esta usando, e isso ser uma recomendação da própria doc, só me encoraja mais usá-las XD

  • @vitormaximus502
    @vitormaximus502 8 місяців тому

    Eu tava aprendendo o react pra me introduzir nos conceitos, ai depois eu ia por nextjs sou novo nessa parada de framework

  • @alisonhj
    @alisonhj Рік тому

    Server side rendering com Next é muito da hora

  • @joaovitor1471
    @joaovitor1471 Рік тому +3

    Acho que as barreiras estao aumentando na parte de react, no caso essa generalizacao nao foi o ideial, o vue de exemplo, nao tem muito dificuldade.

  • @WeltonDemetrio
    @WeltonDemetrio Рік тому +18

    Interessante, aos poucos o React vai se tornando o Angular. Aonde uma biblioteca está caminhando a ser um Framework, que é "opinionado" e com uma curva de aprendizagem grande, como o Diego mesmo disse. Não quero iniciar um debate sobre quem é melhor, porque ambos são excelentes, mas isso derruba toda a narrativa anterior. Existe lugar para todos debaixo do sol.

    • @vitormelo22
      @vitormelo22 Рік тому +1

      Penso mesmo Welton, as novidades que tornou o React grande, serão as mesmas que irão prendê-lo em na concorrência a novos frameworks como Svelte e Solid.

    • @jipdev5167
      @jipdev5167 Рік тому +1

      sempre me pergunto pq a curva de aprendizado do Angular é maior sendo que ele ja te da o café com leite para resolver todos os problemas

  • @wandreperes
    @wandreperes Рік тому +1

    Opa! Tudo blz?!
    Como sempre, vc produz um material de excelente qualidade! Um dos melhores devs do mundo, com certeza.
    Cara, vc explicou um lance super interessante, sobre tailwind, e outros, q quando compilado, vira CSS puro...e tals...
    E MUI? No meu caso, por eu ser full stack, resolvi usar MUI, pra deixar a interface consistente, 'dark', 'light', sem muita dor de cabeça.
    Claro, deve ter na doc.... Mas, gostaria da sua opinião.
    Grande abraço.

    • @dieegosf
      @dieegosf Рік тому +2

      O Material usa Emotion por baixo dos panos então temos que acompanhar o estado da evolução da lib em relação a essas novas atualizações: github.com/emotion-js/emotion/issues/2928

  • @borgotchongo
    @borgotchongo Рік тому +24

    Para quem está aprendendo React do zero, a dúvida que ficou agora é: Inicia estudando o React para ter a base e depois complementa com Next, ou inicia os estudos já com Next?
    Ao meu ver, como o Next é o Framework do React, acredito que é muito importante ter a base do conhecimento para poder estudar o framework e entender o porque da estrutura dele.
    Mesmo que não vá utilizar o React no projeto, me parece importante saber como ele funciona.
    O que acha?

    • @alisson_bike_adventures
      @alisson_bike_adventures Рік тому +19

      Acho que a trilha correta é
      - JS
      - TS
      - React
      - Frameworks

    • @NathanOnCodes
      @NathanOnCodes Рік тому +2

      Next, Typescript e Git até o talo mano... depois você vai completando a base! Mas é NextJs na cabeça

    • @maycondouglas3179
      @maycondouglas3179 Рік тому +3

      E o Nextjs é o framework full stack, não ? Deveríamos estudar back antes de ir p next ?

    • @Luccas_Alves
      @Luccas_Alves Рік тому +11

      Se eu fosse vc faria uma engenharia reversa. Aprende Next e depois vem descascando a cebola. Isso tornará teu aprendizado rápido e concentrado em resultados. Infelizmente tamo sem tempo, depois tu destrava os outros requisitos com mais profundidade.
      Programação se trata de paciência pra resolver problemas que em grande parte das vezes você não sabe resolver, ou só tem uma vaga ideia de como resolver.

    • @evertonf.costasouza3692
      @evertonf.costasouza3692 Рік тому +1

      @@NathanOnCodes cara acho super errado apesar que o nextjs ser muito bom, mas utilizar base sempre é melhor acostumar com framework quando precisar de algo que referencia ao dom, que não tem no framework ou ele permite ai o bicho pega

  • @devTalks3641
    @devTalks3641 Рік тому +1

    Curti comentei e compartilhei

  • @ygorluiz
    @ygorluiz Рік тому

    Tivemos boas notícias na comunidade do Stitches!

  • @vitoriagoncalves7710
    @vitoriagoncalves7710 Рік тому +1

    Com react você quer dizer apenas para apps, ou essas atualizações também se encaixam para o react js (web)?

  • @robsonsilvaalmeida7162
    @robsonsilvaalmeida7162 Рік тому

    titititi... gostei do fundo musical, bem sutil e marcante

  • @flaviofernandes2576
    @flaviofernandes2576 Рік тому

    Diego, boa tarde! Me responda por favor. Estou com a seguinte duvida: Sou iniciante, devo seguir aprendendo o react puro ou já começo a aprender o react junto ao framework indicado na documentação?

  • @devtocruz6698
    @devtocruz6698 Рік тому

    Next sendo referência até para mobile, expo router veio pra facilitar muito. Na web nem se fala...

  • @juniorbytes
    @juniorbytes Рік тому +18

    Isso que a equipe do react esta fazendo é sensacional. As documentacoes baseadas nesses frameworks especificos ficarao mais ricas.

  • @warleyxavier7142
    @warleyxavier7142 Рік тому +1

    Já não basta o JR encarar uma alta nas exigências do mercado, agora precisa aprender uma lib + um framework para codar

  • @matheuscardoso6623
    @matheuscardoso6623 8 місяців тому

    Da última vez que chequei, ainda era complicado fazer o deploy do NextJS em ambientes que não a própria Vercel -que possui um precinho salgado- enquanto mantendo todas as suas vantagens. Com essa atualização, pelo menos, as soluções em nuvem devem dar uma atenção cada vez maior a isso. Alguém tem informações mais atuais sobre? Estratégias de deploy e otimização de custos, principalmente.

  • @doasalah
    @doasalah Рік тому

    Diego, como fazer um mfe usando o next?

  • @eltonsantosoficial
    @eltonsantosoficial Рік тому +5

    As coisas mudam muito, quando apareceu o sucesso SPA foi maior booom e hj já respirando por aparelhos, novamente SSR tomando conta do cenário cm sempre fez. Até o próprio react dizendo q não é bom usar ele puro. Sei lá, se até a própria comunidade não sabe muito o q diz/decidi só mostra o quanto as comunidades das outras tecnologias estavam certas em dizer que react é modinha. Vue e angular por exemplo são mais consistentes. Logo vi, quando começou o booom de react e muitas Libs e framework por cima d framework ja mostrava ser algo passageiro ou algo q terá uma eterna inconsistência na comunidade. Gosto muito de react, uso pra praticamente tudo atualmente, mas devo repensar sobre isso e ver se volto pra Rails q sempre foi meu favorito. Somos da TI e somos sujeito a mudanças constantes, mas mudanças com finalidades certas e q façam sentido e não coisas q parecem q a própria comunidade nem sabe o q quer. Basta seguir exemplo de Rails, é aquilo e aquilo tá dando certo por anos e anos. React chega a esse nível? Eu não consigo responder essa pergunta l.

    • @evertonf.costasouza3692
      @evertonf.costasouza3692 Рік тому +1

      acho muito boa sua colocação criado em um proposito e depois interagindo com vários problema que tinha, mas agora ficou meio politico escolhendo um lado , cara na minha opinião o que precisa em cada projeto e não fala que esse certo .

    • @eltonsantosoficial
      @eltonsantosoficial Рік тому

      @@evertonf.costasouza3692 acho justo msm. Querem amarrar a gente, fixando somente uma coisa pra usar. Acho isso perigoso

    • @dieegosf
      @dieegosf Рік тому +4

      Fala Elton, acho que você está confundindo um pouco. Quando falamos de SSR no contexto do React não estamos falando de SSR do mesmo contexto de Rails, Laravel, etc... Devemos entender que não é porque fazemos o uso de um mecanismo de renderização como SSR que perdemos a interatividade que o React traz pra uma interface front-end. Fora isso, todos esses avanços estão mirando em performance e diminuir a carga de JavaScript pelo lado do cliente, mas sem perder a flexibilidade de usar uma biblioteca de UI. Quando usamos Rails, por exemplo, o front-end construído pelo servidor perde toda sua interatividade no momento que chega ao cliente, ou seja, não há hidratação, não há possibilidade de recarregar parcialmente partes da tela como é a proposta do Streaming SSR, ou seja, o buraco é bem mais em baixo. Comparar SSR do React com SSR do que conhecemos de anos atrás é um erro comum, mas que devemos evitar.

  • @programador0124
    @programador0124 11 місяців тому

    Estou com uma dúvida eu adquiri um curso que tem o nextjs porém não está atualizado eu posso aprender por esse material ou tenho que já começar a estudar o next atualizado ?

  • @murilogarcia6281
    @murilogarcia6281 Рік тому

    É possivel converter o serviço do React JS para arquivos estaticos podendo implantar em hospedagens convencionais? Se sim como?

  • @eduardosalles9212
    @eduardosalles9212 Рік тому

    Gostei do video. Premissa do video: react não é um framework! ahhaha mas deu pra entender

  • @wfl-junior
    @wfl-junior Рік тому +1

    Eu não acho que aumenta a barreira de entrada para iniciantes, talvez até diminua.
    Com Next por exemplo, o iniciante não precisa começar aprendendo SSR, SSG e ISR. Pode criar uma SPA normal com CSR.
    Sem contar que se for mexer com navegação, o file system routing é bem mais prático e fácil de aprender/utilizar do que algo como o react router dom.
    E um bônus é que o iniciante já começa com ótimas práticas.

  • @juniorbytes
    @juniorbytes Рік тому

    Gosto de usar o styled components, agora lascou kk vou ter q me acostumar com tailwind.

  • @dicodidiraja
    @dicodidiraja Рік тому +2

    Estava muito animado com o Vite, mas senti falta justamente da compatibilidade com o Next. Alguém saber explicar porque é mais complicado integrar as duas ferramentas?

    • @dieegosf
      @dieegosf Рік тому +1

      O Next possui um compilador próprio que não encaixa com o Vite.

  • @emanoelinfinity
    @emanoelinfinity Рік тому +37

    Se pensar que a pessoa deve aprender antes o javascript vanilla para só depois ingressar em uma lib como o React, iniciar já no Nextjs não vai ser tão dificultoso. Porém, como até o JS é custoso para o dev padawan, imagina ser introduzido um FW da lib que gostaria de aprender! Acho que a equipe do React está lutando contra o adversário errado.

    • @guihgdias
      @guihgdias Рік тому +5

      Eu acho que vocês estão sendo muito frescos e limitados, da mesma forma que você não precisa aprender HTML pra depois aprender CSS, você também não precisa aprender React pra depois aprender Next, JS é algo a parte, vocês se limitam muito, ai acabam não aprendendo é nada.

    • @thiagodiniz8224
      @thiagodiniz8224 Рік тому +2

      Eu aprendi e pratiquei React através do Next.
      Facilitou muito minha vida e meu aprendizado, hoje eu consigo fazer tudo no react graças ao Next.

    • @lucasduarte7558
      @lucasduarte7558 Рік тому

      além disso, para usar next deve saber um pouco de Nodejs (backend), não só Javascript

    • @thiagodiniz8224
      @thiagodiniz8224 Рік тому

      @@lucasduarte7558 Não exatamente, eu não tinha experiência nenhuma com node e back.
      Aprendi tudo fuçando e com a base do javascript.

    • @lucasduarte7558
      @lucasduarte7558 Рік тому

      @@thiagodiniz8224 sim, tambem acho que depende da experiência da pessoa. Estava pensando em uma experiência Junior, no NodeJs não tem window, por exemplo… é importante saber as particularidades Nodejs para usar o SSR, que é o render padrão do Nextjs

  • @igorthierry
    @igorthierry Рік тому

    muitas libs de CSS in JS estão em cheque mate nesse momento rsrsrs, eu gosto do combo Nextjs + TailwindCSS e RadixUI.

    • @evertonf.costasouza3692
      @evertonf.costasouza3692 Рік тому +1

      eu uso e continuo no styled-components e tb material-ui acho bem melhor não gostei do tailwindCSS achei muito verboso

    • @gabrieldutra8155
      @gabrieldutra8155 Рік тому +1

      Eu uso o styled components TBM, se eu não estiver errado usando o plugin Babel ou pondo no nextjs.cofig você transforma o carregamento da styled components em lado do servidor.

  • @Leralow
    @Leralow Рік тому +4

    Interessante. Neste caso, como utilizar o Next sem a estrutura da Vercel? Por ex. tenho um cliente com uma grande infraestrutura interna onde já existem diversos serviços publicados. Há, inclusive, um SPA feito com Vite. Utilizando o Next para o próximo projeto, quais adequações seriam necessárias mantendo-se este mesmo ambiente?

    • @dieegosf
      @dieegosf Рік тому +1

      O Next possui várias formas de deploy. Se você procura um SPA com Next, pode ter, basta usar o comando "export" do Next e ele vai gerar um projeto muito semelhante ao que criamos com Vite ou create-react-app. Caso você procura utilizar as features do Next de geração estática incremental (ISR) e renderização pelo lado do servidor (SSR), por exemplo, você precisa de um ambiente que suporte Node.js e isso é suficiente pra executar o projeto Next.

    • @eumanjodisso2060
      @eumanjodisso2060 Рік тому

      Não entendo esse apego todo com a Vercel, na empresa que e trabalho são mais de 80 projetos usando Next.js, todos são hospedados na AWS e nenhum deles deixou de perder alguma funcionalidade por isso, tem gente que acha que só da pra usar Next na Vercel, isso ta muito longe de ser verdade. Queria saber de onde as pessoas tiraram essas conclusões.

    • @Leralow
      @Leralow Рік тому +1

      @@eumanjodisso2060 amigo, acho que você interpretou a minha pergunta de maneira equivocada. Foi apenas um questionamento de alguém que está tentando entender melhor a situação, e não de alguém que está defendendo um ponto de vista, como por exemplo, o ponto de vista de que o Next não funciona sem a Vercel. Portanto, esse apego ao qual você se referiu não existe nesse caso. Como eu disse, um cliente tem estrutura própria de infra, ou seja, não é Amazon, nem Heroku, nem Vercel, é estrutura própria com equipe própria, um Cluster bem grande onde foram investidos algumas centenas de milhares. Até o próprio GitLab está em estrutura própria interna. Nessa infra-estrutura tem aplicações em Python, Java com Spring, Java com JSF, Wordpress, Node com Express, SPA com Vite, servidores de arquivos, servidores de email, serviço de telefonia VoIP, diversos bancos de dados etc etc etc. Esse tipo de infra própria é bem comum em empresas grandes, instituições financeiras, autarquias e empresas públicas.
      Voltando a pergunta original, a dúvida foi sobre quais seriam as adequações necessárias para que nenhuma funcionalidade do Next seja perdida mantendo-se o mesmo ambiente. Ou seja, se apenas um servidor Node é suficiente para rodar um projeto feito no Next sem que se perca nenhuma funcionalidade ou se seria necessários usar recursos extras como o terraform, por exemplo.

    • @Leralow
      @Leralow Рік тому

      @@dieegosf Valeu Diego.

  • @viniciusvinum
    @viniciusvinum Рік тому +1

    Comecei usar Next por necessidade, n sabia q ia virar padrão pra criar apps kkkkkk

  • @kaiogabriel8310
    @kaiogabriel8310 8 місяців тому

    Tenho tido problemas com o Vite, consigo rodar o npm vite@latest e o npm install porem quando eu uso o npm run dev da um erro e pede pra mim excluir o packge.lock eu faço a remoção dele e dps rodo o npm install dnv e mesmo assim segue o erro não consigo utilizar ele tenho usado o CRA

  • @rafaelfigueiredo6032
    @rafaelfigueiredo6032 Рік тому +2

    Oi pessoal, baseado nisso de começar a desenvolver com um framework e se preocupando com uma estilização com 0 runtime, teriam algum curso pra indicar para iniciantes que já aborde esses temas desde o início? A própria rocketseat tem algum?

    • @dieegosf
      @dieegosf Рік тому +1

      No Ignite, a partir do segundo projeto, todos usam Next.js

  • @thiagueragames8375
    @thiagueragames8375 Рік тому +1

    Boa tarde Diego e demais! Considerando uma aplicação que envolva Data Science, análise de dados, etc. Gostaria de utilizar python no backend, a ideia é usar AWS Lambadas e AWS API Gateway pra construção da API e backend. Nesse novo "modelo" do React, acredita ser válido utilizar o Next.js APENAS para o frontend?

  • @carolfreitas7701
    @carolfreitas7701 Рік тому

    🤯

  • @ricardoteixeira834
    @ricardoteixeira834 Рік тому +1

    Hoje estou usando Styled-component com aplicações Next, somente configuro para que o componente seja estilizado no servidor (SSR), será que com as novas atualizações não poderemos mais usa-lo? realmente eu acho mais produtivo, seria uma pena deixar de usar

    • @guh2514
      @guh2514 Рік тому +1

      Tentei usar styled compoents com next e não consegui de jeito nenhum, você instalou normalmente Ricardo?

  • @tadeupaiva7407
    @tadeupaiva7407 Рік тому

    Na nova turma do Discover já será atualizado o conteúdo?

  • @tanque2222
    @tanque2222 Рік тому

    Eu sou iniciante e não achei nenhuma barreira, muito pelo contrario, com next é mais fácil criar rotas entre outras facilidades

  • @_felipeesilvaa
    @_felipeesilvaa Рік тому +2

    o vite continua sendo uma boa opção para criação do projeto ou já seria melhor usar o next ?

    • @dieegosf
      @dieegosf Рік тому +2

      Continua sendo uma boa opção sim, mas temos cada vez mais motivos em utilizar um framework como esses no lugar do Vite ou qualquer opção de criação de um projeto React. Porque a ideia do framework é trazer de forma padronizada coisas comuns que temos que lidar no dia-a-dia de projetos React como roteamento, chamadas HTTP, otimização de imagens, carregamento de fontes, estilização, etc...

  • @ClaudioCavalcanteTonha
    @ClaudioCavalcanteTonha Рік тому

    mesmo sistemas internas precisa?

  • @tomasdinis6780
    @tomasdinis6780 Рік тому

    Sou novo na area do Next.JS, sendo assim com o next eu não posso ter nada renderizado do lado do cliente? Por exemplo se tenho um botão com tailwindcss que varia o background de acordo com os dados vindos do backend, eu já tenho de trazer isso do server?

  • @thiagodiniz8224
    @thiagodiniz8224 Рік тому

    Eu uso o Tailwind com CSS Module e Sass, mas é gosto pessoal.

  • @maycondouglas3179
    @maycondouglas3179 Рік тому +2

    Sendo o NextJs um framework full stack, é necessário ter conhecimento de back end antes de ir para ele ? Estudar back com node por exemplo, ou não faz diferença na hora do aprendizado ? ps: Agora que estou criando meus primeiros projetos com React

    • @felipe-simoes
      @felipe-simoes Рік тому +2

      Estudar backend, mesmo que você tenha preferência por front é importante independente do framework e linguagem. E se tratando de react de qualquer forma você já mexe com um pouco de back, assim como no angular vc precisar de um processamento das informações antes de exibir na tela.

    • @The96tiago
      @The96tiago Рік тому +1

      não precisa usar o backend se não quiser

    • @dieegosf
      @dieegosf Рік тому +2

      Não, acho que back-end é um plus, mas não necessariamente você vai ter que ter conhecimentos back-end pra desenvolver com o Next.js. O back-end pode ser um projeto totalmente separado.

    • @maycondouglas3179
      @maycondouglas3179 Рік тому

      @@dieegosf Obrigado !

    • @maycondouglas3179
      @maycondouglas3179 Рік тому

      @@The96tiago Eu quero, essa seria a questão, estudar back com node antes ou estudar direto no NextJs, da maneira que é usada lá.

  • @user-fd3np7ls3t
    @user-fd3np7ls3t Рік тому

    A minha maior preocupação com isso tudo é na parte de deploy, lembro que a um tempo atrás para aproveitar todo o potencial do Next era necessário o deploy dentro da Vercel, e para tentar chegar perto da configuração de lá era necessária muitas configurações no AWS por exemplo, alguém sabe me dizer como esta hoje?

    • @dieegosf
      @dieegosf Рік тому +4

      Hoje existem muitas opções variadas de deploy, tanto na Vercel, quanto Cloudflare, Open Next, etc... Não existe mais um vendor lock-in nos frameworks, principalmente nos outros além do Next

  • @R6videos6R
    @R6videos6R Рік тому

    Cadê o link da newsletter na descrição?

  • @pauloluguenda8397
    @pauloluguenda8397 Рік тому

    Quando é que vão falat sobre as IAs, ChatGPT, Copilot X e etc? 😭

  • @brunomangilli7339
    @brunomangilli7339 Рік тому +1

    E ai, conteúdo bom e interessante! Tenho uma dúvida, você comentou sobre o Next ser o "melhor" atualmente, mas ja vi alguns artigos dizendo que o Remix é muito melhor e eficiente do que o Next, qual sua opinião? Não tem nada a ver? Ou é preferência?

    • @dieegosf
      @dieegosf Рік тому +1

      Sempre existem vantagens em um e no outro, acho que não existe um melhor e sim preferências e até casos de uso específicos, mas hoje não tem como comparar se teu propósito for achar um emprego com a tecnologia, Next ainda é e vai ser uma opção mais segura por muito tempo.

    • @brunomangilli7339
      @brunomangilli7339 Рік тому

      @@dieegosf obrigado por responder, tmj!

  • @paulohenriquekarvat6197
    @paulohenriquekarvat6197 Рік тому +1

    Uso react com js, nem esse tal de typescript usei ainda, isso vai mudar será, uso react por ser simples agora ficando pensativo, será que vão acabar com a lib, querendo transforma um framework,

  • @AlexandreAkao
    @AlexandreAkao Рік тому

    E em relação a microfrontend single-spa ta sendo uma boa opção?

    • @dieegosf
      @dieegosf Рік тому +1

      Infelizmente tenho pouca visibilidade sobre micro front-ends, ainda não vi casos de uso em produção.

  • @MartinsPereiraS
    @MartinsPereiraS Рік тому +2

    Mas para a criação de uma dashboard por exemplo, o react ainda seria o ideal, certo?

    • @alamo_DevFlow
      @alamo_DevFlow Рік тому +1

      Também estou com essa duvida, eu até manjo de next, porêm comecei um dashboard para uma empresa a algumas semanas atrás somente em vite, sistema interno mesmo, agora fico com essa questão, deveria ter feito com next ou não...

    • @Guihalmeida
      @Guihalmeida Рік тому +1

      Sim, dash não precisa de SEO

    • @dieegosf
      @dieegosf Рік тому +6

      A ideia que eu passo no vídeo e não ver o Next ou Remix como frameworks para adicionar SEO ou SSR em um app React porque você pode usar várias outras funcionalidades do Next que vão te ajudar como otimização de imagens, de fontes, redução do bundle JavaScript para melhorar a performance e por aí vai. Ou seja, na minha opinião, hoje vale a pena usar essas ferramentas independente do tipo de projeto.

    • @ednetolls
      @ednetolls Рік тому

      Eu comecei meu primeiro projeto com React com Vite para rodar de início em um servidor sem Nodejs, então para mim ainda vai demorar para trabalhar com. Next em produção, pois a empresa aqui está engatinhando ainda no desenvolvimento.
      Mas acredito que no futuro quando a empresa estiver com uma visão melhor e poder investir eles devem migrar para um Framework e acredito que devem existir muitas nesse mesmo perfil.

  • @lipenilmar90
    @lipenilmar90 Рік тому

    Comecei agora e ja tenho que mudar a cabeça kkkk

    • @dieegosf
      @dieegosf Рік тому

      Fica tranquilo, o maior desafio é não sofrer com a ansiedade e filtrar bem os estudos pra não sair estudando coisa antes da hora.

  • @paulocode725
    @paulocode725 Рік тому

    Eu sempre achei que o module.css fosse o mais básico. Pelo que entendi, caso nao quiser usar, teria que implementar todo estilo num global?

    • @RalfSchlindwein0
      @RalfSchlindwein0 Рік тому +1

      se eu não me engano, se tu não usa module.css tu acaba sempre importando o arquivo css de forma 'global' quando o arquivo JS é chamado (runtime) e quando troca de tela o CSS ainda perpetua. Ou seja, lá no arquivo viewProduct, por exemplo, tu consegue acessar todas as classes da Home. Isso pode dar conflito se tu usa o mesmo nome nas classes em dois arquivos diferentes.

  • @DanielLimaPro
    @DanielLimaPro Рік тому +1

    O ruim do Next é não gostar de Styled-components.

    • @felipek.deboni8157
      @felipek.deboni8157 Рік тому

      Não é o Next, o time do React fez uma nota pra criadores de lib css in js e desencorajou o uso.
      Os problemas de performance são os principais argumentos para não utilizar.

  • @marceloroldrin
    @marceloroldrin Рік тому +3

    Daqui uns dias os frameworks js vão igual ao php de alguns anos atrás.

    • @dieegosf
      @dieegosf Рік тому +1

      Quando falamos de SSR no contexto do React não estamos falando de SSR do mesmo contexto de Rails, Laravel, etc... Devemos entender que não é porque fazemos o uso de um mecanismo de renderização como SSR que perdemos a interatividade que o React traz pra uma interface front-end. Fora isso, todos esses avanços estão mirando em performance e diminuir a carga de JavaScript pelo lado do cliente, mas sem perder a flexibilidade de usar uma biblioteca de UI. Quando usamos Rails, por exemplo, o front-end construído pelo servidor perde toda sua interatividade no momento que chega ao cliente, ou seja, não há hidratação, não há possibilidade de recarregar parcialmente partes da tela como é a proposta do Streaming SSR, ou seja, o buraco é bem mais em baixo. Comparar SSR do React com SSR do que conhecemos de anos atrás é um erro comum, mas que devemos evitar.

    • @marceloroldrin
      @marceloroldrin Рік тому

      @@dieegosf perfeito.
      O comentário é mais pra provocar (num bom sentido).
      Entendo que estamos chegando a um ponto de equilíbrio.
      "Tudo no server.
      Não, tudo no client.
      Devolve para o server.
      Calma, não tanto..."
      E assim vai.

    • @RobsonP6LRFS9
      @RobsonP6LRFS9 Рік тому +1

      ​@@dieegosf Não entendo muito essa lógica. A cada ano que passa, os PCs e celulares e a própria internet estão ficando mais rápidos, mais agora estamos cada vez mais voltando para processar tudo no servidor como era nos anos 2000 quando não existia tanto poder de processamento no cliente. Isso é meio contraintuitivo. Trabalho com SPAs de gestão e não vejo muito sentido em usar SSR para isso já que não preciso de SEO e o SPA me entrega um resultado muito mais próximo ao nativo. Sem contar que os SPAs reduzem a carga de processamento e custo com server.

  • @michaellesley2146
    @michaellesley2146 Рік тому

    E agora para eu me desvincular o Styled-Components ... kkk RIP

  • @albert_rocha
    @albert_rocha Рік тому

    Styled Components não pode morrer 😭😭😭😭

  • @Choosebrand
    @Choosebrand Рік тому

    O next13 agora totalmente focado para TS, para quem ainda não tem o conhecimento suficiente para TS, vale a pena usar o Next com JS ?

    • @dieegosf
      @dieegosf Рік тому +1

      Olha, acho que vale sim, mas recomendo fortemente aos poucos ir migrando pra TS :)

  • @mateusbolito
    @mateusbolito Рік тому

    Sera que algum dia eles vai intregar next no vite?

    • @dieegosf
      @dieegosf Рік тому

      Não, o Next usa por baixo dos panos um compilador em Rust, não faria sentido migrar para usar o ESBuild que é o mecanismo do Vite.

  • @DeijaiMiranda
    @DeijaiMiranda Рік тому +2

    A ideia é se tornar um Angular da vida

  • @LuisFernandoGaido
    @LuisFernandoGaido 7 місяців тому +1

    Caralho, como vocês fazem software difícil. Puta que pariu. Quanta dificuldade. Estou desde 2005 por aí criando softwares web e garanto: não precisa.

  • @limazia
    @limazia Рік тому

    Diegão podia gravar um vídeo explicando como funciona feature por região
    Exemplo: uma feature disponivel apenas no Brasil e Argentina

  • @MarcosFerreiraIO
    @MarcosFerreiraIO Рік тому

    Que som é esse?

  • @devbpn
    @devbpn Рік тому

    Cara eu preciso que alguem me indique onde aprender o tailwind CSS, eu sei CSS puro e consigo aprender pela propria documentação mas eu quero algo mais objetivo alguem com uma boa didática, no memento estou pensando em desistir de tailwind e continuar no puro mas são muitas qualidades cara

  • @observermind
    @observermind Рік тому +2

    Cara, o conceito de desacoplamento é o ideal. Tanto no backend eu primeiro crio o core e no FIM eu pego um framework que se conecta ao meu core sem criar dependencia, quanto no frontend onde eu crio um core em Typescript e conecto um react ou qualquer outro framework. Esse é o ruim de iniciar em um framework. A facilidade de ter algo pronto instantaneo é atraente para quem começa, mas quando se depara com outros desafios como performance não consegue lidar. Quantos projetos ultimamente em angular e react eu vejo com baixa performance pois a galera não se preocupa com isso...

    • @vitormelo22
      @vitormelo22 Рік тому +1

      Concordo plenamente, aos poucos os legados vão se arrastando, tomando recursos dispendiosos para migração.
      Acredito que a sua abordagem seja a mais sustentável no longo prazo, ter um próprio modelo de trabalho e se adaptar as mudanças sem depender inteiramente delas.

  • @patrickwendeel
    @patrickwendeel Рік тому +1

    quando você usa o styled-components e realiza a compilação do seu código, todas as classes CSS correspondentes aos seus componentes serão geradas no momento da build. Essas classes serão adicionadas ao arquivo de saída (bundle) da aplicação, juntamente com o restante do código JavaScript.
    Dessa forma, quando o usuário acessar sua aplicação no navegador, as classes CSS já estarão disponíveis para serem aplicadas aos elementos da página. Isso significa que não haverá nenhum tipo de atraso ou delay causado pela geração de classes CSS em tempo de execução (client-side rendering).
    É importante ressaltar que, caso você esteja utilizando server-side rendering, o styled-components pode ser configurado para gerar as classes CSS no servidor, antes de enviar o HTML da página para o navegador do usuário. Isso pode melhorar ainda mais o desempenho da sua aplicação e garantir uma renderização mais rápida da página.

    • @dieegosf
      @dieegosf Рік тому +2

      Bom dia Patrick, as classes fixas sim, mas tem coisa que não é gerada em build time e sim em runtime. É uma longa discussão e não tô aqui pra defender um ou outro, mas vale ficar de olho nas issues do Github deles: github.com/styled-components/styled-components/issues/3856

    • @patrickwendeel
      @patrickwendeel Рік тому

      @@dieegosf estou muito feliz com todo o aprendizado que a Rocketseat proporciona e fico mais feliz ainda por ser respondido por você fera. Lhe admiro muito. Sucesso 🚀💚. Detalhe da minha resposta anterior foi gerada pelo nosso amigo ChatGPT.

  • @danielrangelsa
    @danielrangelsa Рік тому

    Acho que já iniciar em um framework é muito mais vantajoso do que começar em um ambiente totalmente livre. Para quem está começando, trabalhar em um ambiente livre, pode acabar fazendo um monte de coisas erradas.

  • @JonatasSS_
    @JonatasSS_ Рік тому +1

    lá ele viu 00:12 🤔🤨

  • @caiofdacosta
    @caiofdacosta Рік тому

    Vídeo informativo, mas não ficou claro pra mim pq necessariamente seria preciso passar a usar algum desses frameworks. Uma aplicação React SPA usando Vite, desde que bem estruturada, não deveria ser suficiente para coisas relativamente básicas? Por que *toda* aplicação precisaria passar a usar algum desses frameworks?

    • @dieegosf
      @dieegosf Рік тому

      A ideia do framework é trazer de forma padronizada coisas comuns que temos que lidar no dia-a-dia de projetos React como roteamento, chamadas HTTP, otimização de imagens, carregamento de fontes, estilização, etc...

  • @tompeper5462
    @tompeper5462 Рік тому

    E o material ui como que fica

    • @dieegosf
      @dieegosf Рік тому

      Material usa Emotion então vale acompanhar o estado do Emotion com essas novas atualizações: github.com/emotion-js/emotion/issues/2928

  • @passoword100
    @passoword100 Рік тому

    RSXP queria muito ir mais e muita sacagem pagar mil reais em um ingresso

  • @danielchaves6265
    @danielchaves6265 Рік тому +4

    Nem do Javascript sai ainda e já tô vendo a ponta da próxima chapeleta chegando para me fude. XD

  • @cloudsss83
    @cloudsss83 Рік тому

    ah como é bom não usar esse frankenstein chamado React :D

  • @daniel_goncalves
    @daniel_goncalves Рік тому +1

    Como fica a biblioteca Mantine nessa história?

    • @dieegosf
      @dieegosf Рік тому +1

      A biblioteca Mantine foi criada em cima do Emotion, uma lib de CSS-in-JS, então vale ficar de olho no Github do Emotion para o suporte ao Next 13: github.com/emotion-js/emotion/issues/2928

  • @lucadestefanoboer6468
    @lucadestefanoboer6468 Рік тому

    Adicionem o link da newsletter pleease

    • @dieegosf
      @dieegosf Рік тому

      www.rocketseat.com.br/newsletter

  • @Renanrr87
    @Renanrr87 Рік тому +1

    eu gosto dessa ideia do vanilla, mas pra quem usa styled components, começar a escrever css do jeito do vanilla extract, e muito ruim

  • @tthiagolino8
    @tthiagolino8 Рік тому

    Já tinha passado da hora de aposentar o CRA, a muito tempo já vinha usando o Vite e o Next quando criando novos apps React, mas a solução do react para os server components demorou demais e ainda está muito incompleta
    Hoje em dia raramente crio novos apps react, migrei de vez para o Svelte/Sveltekit e meu único arrependimento foi ter demorado tanto
    Sinceramente se você não está construindo um app híbrido e não depende de uma biblioteca de UI específica do React eu não consigo ver um único bom motivo para se iniciar um novo App com React

    • @dieegosf
      @dieegosf Рік тому +5

      Fala Thiago, temos que tomar cuidado apenas com olhar apenas pro lado técnico da coisa porque se fosse dessa forma talvez várias tecnologias perderiam totalmente sentido e ninguém mais usaria, mas existem vários critérios na hora de escolher uma tecnologia como, por exemplo, o mercado. React continua sendo a melhor opção nesse caso. Dificilmente chegaremos em um momento que apenas o lado técnico da coisa vai ditar qual tecnologia é usada ou não.

    • @tthiagolino8
      @tthiagolino8 Рік тому

      @@dieegosf Definitivamente, se você está procurando uma vaga deve buscar ser capaz de solucionar problemas da forma que o contratante desejar afinal no fim das contas o trabalho de um programador é usar ferramentas para entregar valor por meio de um produto, a ferramenta é só um detalhe
      Mas também acredito que como programadores devemos impulsionar a área na direção que achamos que irá trazer melhor experiência para os devs e nos permitir entregar mais valor, se ser o mais requisitado pelo mercado fosse o único requisito para uma ferramenta ser adotada o PHP nunca teria perdido seu posto como primeira opção para novos projetos

    • @tthiagolino8
      @tthiagolino8 Рік тому

      @@dieegosf E mesmo encarando do ponto de vista de alguém que está contratando eu acho mais simples trabalhar com o Svelte, já que mesmo que você não encontre muitos devs já especializados na área qualquer um que saiba html, css e javascript consegue aprender o suficiente para construir um app em uma tarde e se tornar proeficiente em 1 semana (se já tiver experiência com outro framework javascript é ainda mais rápido)
      Enquanto o React é tão cheio de regras e exceções que mesmo trabalhando com ele a anos e me considerando proeficiente ainda me pego constantemente brigando com a ferramenta por tornar algo mais complexo que o necessário e corrigindo colegas com mais tempo que eu por criar problemas de desempenho acidentalmente

    • @tthiagolino8
      @tthiagolino8 Рік тому

      @@dieegosf Além de que seja para se candidatar ou para contratar ainda é necessário levar em consideração todo o ecossistema em volta do React, já que quase que impossível criar um app satisfatório sem precisar recorrer a bibliotecas de terceiros criadas para suprir as inúmeras deficiências do react
      Enquanto com o Svelte além de ele suprir a maior parte dessas deficiências, sendo até mesmo o único framework que traz soluções para estilo e animações, é também mais simples de se adaptar a ferramentas de terceiros, já que qualquer biblioteca feita para funcionar com javascript puro ou feita para interagir com o DOM é automaticamente compatível (ex: i18n, autoAnimate, motion one, etc...), ao contrário do React que precisa de bibliotecas que adaptam outras para funcionarem dentro do framework
      No fim o ecossistema do Svelte acaba sendo maior (exceto no caso que falei de bibliotecas de UI), justamente por não precisar de um ecossistema construído especificamente para ele

  • @omarcusmoreira
    @omarcusmoreira Рік тому

    E o meu chackraaaaa????