Next 13 vai TRANSFORMAR o front-end! (novas features)

NLW Copa | Inscreva-se gratuitamente para participar do evento completo: rseat.in/ingre...
O framework mais famoso do ecossistema React tá cheio de novidades.
O Next.js 13 foi lançado durante a Next.js Conf 2022, a conferência global para devs apaixonados por esse universo, e veio trazendo novas features que podem mudar a sua experiência de codar com essa tech.
Nesse vídeo eu vou te contar tudo que tem de novo e quais novidades e destacaram no meu ponto de vista.
Será que o Next.js 13 vai transformar a nossa maneira de construir front-ends? 👀
Saiba mais sobre o Next.js 13 no blog oficial: [nextjs.org/blo...](nextjs.org/blo...)
-----
Conecte-se a 200mil 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:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

[@leandrociric5007]

Diegão nunca decepciona, ia te pedir pra gravar esse video e aqui está! Por favor traga mais conteúdo sobre next e suas próximas features, vai ser amazing!

[@fraternidadeaustriaca2625]

Trabalho

[@zevdvlpr]

Up

[@liivisgomes1555]

Concordooooo

[@codewithguillaume]

That's cool my friend. I was actually looking for a good tutorial in Portugal and found your video :) Obrigago ! Enjoy !

[@MagnoKellyFelipe]

Diego, sendo assim veremos atualizações referentes no ignite?

[@EwertonDutra]

A questão da comparação com vite está ainda em investigação 😉😅

[@gabrielarizag.decastro5572]

Vercel transformando o mundo javascript em PHP ❤ Essas atualizações deveriam ser chamada de versão NodeHP (javascript + node + nextJs = NodeHP). Esperando ansiosamente pela versão 19 do next (PHPxJs) Referências da minha infância, por favor não leiam abaixo e, se ler, não zoe nos comentários 😅 PHP evolui para: PHP Tipado; ReactJs evolui para: NextJs Server; PHP Tipado: É Hora de morfar; NextJs Server: É hora de morfar; PHP Tipado + NextJs FUUUUUUUUUSÃO - Chi-Chi: Ãhnn??? Não pode ser! ===================================== PhPxJS

[@higorallan4312]

Por favor Diego, faz um vídeo entrando mais a fundo nesses assuntos, seria incrível e acrescentaria demais a carreira de todos.

[@karytonn]

Vue manda lembranças hehe Maioria dessas novas features já faz parte do ecossistema NuxtJS a muito tempo.

[@ChristianFerraz]

Seria legal, pelo menos no IGNITE fazer uma aplicação com NEXT13

[@dieegosf]

O próximo módulo que sair já vai estar com Next.js 13 (pelo menos as features que saíram do beta)

[@GabrielRibeiro-rl1vy]

Algm sabe me responder se o Next me auxiliaria em fazer um sistema que além do front envolveria fazer apenas requisições ao banco de dados(CRUD)?

[@WalissonMarkley]

Sim, totalmente possível!

[@leleparanormal1579]

Caramba mano, muito bom essa questão do SSG, vai ficar bem mais prático, complicado vai ser dar manutenção em versões anteriores, vai ter muito dev que vai ter que "reaprender" a estrutura do Next 12 pra baixo kkkk, mas queremos sim, Diegão, um vídeo mostrando todas essas features na prática.

[@SilasGamer1]

Agora sim vai ter Senior next js KKKKKKKK

[@RenatoBorgato]

@@SilasGamer1 🤣

[@fjtips]

Valeu demais por esse conteúdo Diego! E sim claro, queremos conteúdos práticos, pois é oq de fato faz a gente aprender! Por favor, traga eles para nós!

[@zevdvlpr]

Up

[@LuisFelipe-lp5eo]

up

[@hubertryan]

Fala Diogao, traz mais vídeos práticos sobre cada uma das features. Com certeza a galera iria adorar, abraço!

[@alexkads]

LoaderData e ActionData do Remix tá no NextJs 😀😀😀😀😀

[@saulloalmeida2080]

Vídeo na prática tbm Diego, valeuuu

[@rodrigooliveira1442]

Além do NLW Copa, tras mais algum conteudo na prática aqui para nós...

[@GabrielSestrem]

Diego, faz um vídeo convertendo uma aplicação do Next12 pro Next13, tirando o getServerSideProps da página, etc

[@EdygarOliveira]

Pow, nenhuma menção ao REMIX? É que foi de lá que veio inspiração pra tanta coisa dessa versão

[@lucianocarvalho3479]

Show! Acredito sim que a cada versão nova do Next é um passo mais próximo de um framework fullstack, é fantástico a velocidade da evolução! Parabéns pelo conteúdo 👏👏👏

[@willianregina]

Diego faz um vídeo mostrando como construir uma aplicação com TurboRepo colocando Nextjs e Nestjs juntos hospedando na Vercel. isso é possível?

[@phemartin]

Eles com certeza vão lançar um /api folder no next 14 e virar uma plataforma fullstack.

[@ruannawe6157]

Hotwire já faz isso tem 2 anos, o next sempre correndo atrás das funcionalidades do Ruby on Rails

[@diegovasquesmellet1467]

Fala Diego, blz? Qual vc acha que seria a melhor (se é que exista alguma) estratégia para introduzir o Next em um projeto MUITO grande que não usa?

[@GabrielSestrem]

Eu uso NextJs full stack. Inclusive temos IP Rate Limit com redis cache (upstash) no Middleware do NextJS. É animal

[@Tomas.Franco]

Diego pode descansar também .... rs...

[@victorbarros9822]

Aguardando isso tudo no ignite rs

[@alexandregurgel2554]

A feature do fetch!!! Super essencial

[@lucas38458]

Massa, único ponto negativo é o próprio react kkkkk

[@Joao-nn6gn]

Nossa, so que tem mexeu com esse next/image sabe o BO que é pra estilizar... um monte de nested elements..span atras de span. Ainda bem que melhoraram isso.

[@lazarok0963]

20:23 - Acho que a melhor feature seria vc falar do suspense layout

[@leandrocarlos8117]

Pessoal, consigo usar essas novas feat no react native, ou é exclusivo pra web?

[@gpenner]

Diegao já vai ter que atualizar a tela do ignite novamente huehuehue

[@deerp6497]

Quero video das features!!!! Todass kkkkkkk

[@rodrigomartins9115]

cara até parece que estou voltando para o php, com toda a educação, mais pessoal vai mundo no hype, tao maluco fazer um backend assim, tendo linguagens com anos de mercado, com facilidades para desenvolver rapido e com muita qualidade, da onde que vou deixar de usar linguagens de back, como go, spring(java, kotlin), python, pra usar isso ai, para né. Uso spa, e é bom demais, ai vem o React e empurra o cara pra usar SSR, a ta de sacanagem. olha que eu adorava react.

[@marcosbaiadori5107]

Com certeza ele vai migrar pra ser um fullstack, faz sentido eu já tenho essa preocupação, poder integrar os dois seria ótimo, ainda mais se ela oferecer um ambiente configurado com edge computing... Meu Deus que coisa linda kkkkkkk

[@rafaelbernardino4615]

Diegão!! Faz o vídeo pra nós, tu é fera DEMAIS! DISPARADO o melhor instrutor de qualquer assunto que você for dar aula, eu me inspiro muito em ti.

[@vandsonfalcao]

não da pra dar like duas vezes :( manda video pratico.

[@thalyssonleite1479]

Diegão faz um decode sobre essas coisas por favor

[@PauloHenrique-eq6rf]

Diego, faz um vídeo entrando mais a fundo nesses assuntos

[@kalabresa4329]

Esse Server Components lembra um pouco do Blazor server no .NET

[@DigowSp]

Por favor Diego, faz um vídeo entrando mais a fundo nesses assuntos, seria incrível e acrescentaria demais a carreira de todos.

[@matmolin]

pode trazer o vídeo prático, Diego. Começar com um app com auth e essa nova feature de layout e data fetching já ia ser bem maneiro.

[@SilasGamer1]

Rapaz é tanta forma de renderizar um componente que tô começando a ficar deprecated :s

[@diogosoares6546]

Se puder traz todas kkkkk

[@vitormelo22]

O Server Components não é +- o que o Astro faz?

[@lucasmdev]

Queremos o vídeo detalhado Diego!

[@alisongamertv]

Mostra na prática Diegão!!!

[@fezeeGz]

mano traz um video pra ficar cm mais clareza pra qm ta iniciando que nem eu :) tmj

[@pedrobenicio4955]

interessante as mudanças. Aliás, ótimo vídeo! Deve ser só eu que não gosta de criar o backend no Next. Acho que fica muito bagunçado. Até pra projetos simples eu costumo me perder ali.

[@DanielRios549]

Ele vai continuar usando React?

[@andrecoelho2775]

Essa camiseta do Assemble eu tenho

[@Rafael-vn2bo]

Vídeo prático sim, de todas!!!

[@ageurodriguesdeoliveira8953]

Poxa um vídeo do Satori seria massa :)

[@Guhenf]

Chega a ser crime isso ser gratuito.

[@igorpwn]

Quando fui do Angular para o React, o que mais me incomodou foi a mudança do sistema de rotas. Afinal o angular já tem tudo isso pronto. Ele permitia eu colocar componentes pais para filhos específicos de maneira muito descomplicada. Me incomodou bastante quando fiz minha primeira aplicação em next, ter que declarar isso em ambas as paginas, pois não dava pra colocar no _app.

[@junyorff12]

Next será o novo ruby on rails

[@vitorwindberg4212]

Sobre a pergunta no final: eu acredito que o Next.js já seja um framework mais voltado para o backend do que o frontend. Claro, a funcionalidade "principal" é o React que usamos dentro dele, mas praticamente tudo que faz o Next diferente do create-react-app ou vite é a sua camada do servidor. Os devs novos vão passar mais trabalho ano que vem viu kkkkkk, o frontend tá cada vez mais voltado para o fullstack e mais complexo.

[@henrique_e_nas]

vai ter vídeo de qwik ????

[@raphaelfreitas4565]

Grava sim Diegão!

[@MarcosVMSoares]

Phoenix Live View eh vc ai ?

[@CMiyamoto]

Alguem saberia dizer um bom Roadmap do 0 até FrontEnd Dev em NextJS? Quero muito aprender frontend e gostaria que fosse NextJS.

[@enriquesantosdeoliveira5798]

Primeiro começa do javascript, depois react e por fim next. Tem quem diga que dá para aprender next e react em uma pancada só, apesar do next ser 90% react eu acho mais bacana ter primeiro uma base em React ( minha opinião ), mas é isso mano.

[@candidofinda7819]

muito bom o video diego

Vídeo prático!

[@willianf]

Nenhuma grande novidade ainda frente ao Remix, né? E ainda falta uma forma de mutação que o Remix tem e o Next.js ainda não lançou nem um alpha :/ Impressionante como eles estão correndo atrás agora pra fazer nested layout, server-side fetching/rendering como o Remix faz. Digo impressionante pq Next é o framework mais popular, mas parece a Vercel foi pega de surpresa com o Remix.

[@kalilmagal2733]

Pois eh, bom que o Remix vai motivando os outros frameworks a se atualizarem

[@josealexsandro9768]

Já imagino a difículdade que os dev vão ter para porta o código das aplicações basedadas nas versões antigas do next, para essa no feature do SSG. Mas essa nova feature só SSG é muito boa.

[@noriller]

Duas perguntas: - vi um pessoal perguntando se todo esse ecosistema que a vercel ta fazendo não vai acabar como um "vendor lock in"... será? - quando sera que eles vão lançar uma versão do react reescrita em rust com performance 1000x melhor que a original?

[@marcelogouveiadeassis230]

1) sim 2) nunca

[@maikonalexandre87]

Pode mandar 💪🏻

[@rosembergfilho7766]

No passado, todo mundo queria desacoplar as aplicações agora querem acoplar de novo kkkkkkk

[@dieegosf]

No passado o desacoplamento foi originado pela inflexibilidade que havia, hoje acho que o ponto de conectar as pontas é que conseguimos manter a flexibilidade e reatividade das aplicações :)

[@jaovitubr]

Essa atualização realmente é muito relevante, sim queremos mais conteúdos sobre

[@Oculterous]

Ué, como que não, eu uso geração estática com busca dinâmica de conteúdo

[@dieegosf]

Quando me refiro á dinamismo é obter informações contextuais como o usuário logado, por exemplo.

[@MyALPHAguy]

kd o tutorial

[@BieowC]

Não gostei de voce falar mal do turbopack

[@dieegosf]

Mal? Eu não falei mal, só falei que não foi o que mais me empolgou haha

[@tiagobarros7093]

Traz um video codando essas novas features, seria foda demais!! 🚀

[@matheussanton8008]

monstro

[@ocabrapreto5346]

Não.

[@jaksonlima1059]

Top d+

[@mikeomonstro]

Obrigado pelo conteúdo e aguardo os próximos vídeos detalhando as features

[@caiohenrique1624]

Esse Streming é tipo o Phoenix LiveView do Elixir?

[@dieegosf]

Eu ACHO que o liveview é feito com base em websockets (não tenho certeza), nesse caso, não, o streaming é basicamente manter uma requisição HTTP em aberto que "cospe" HTML/CSS do servidor por partes montando a interface.

[@caiohenrique1624]

@@dieegosf Acredito que não seja a mesma tecnologia, mas usam ideias parecidas.

[@adrianknapp]

Sim Diegão, lança conteúdo prático dessas features pra nós!! 🥺

[@henriquemartins8401]

Diegao, faz um vídeo sobre os Servers Components!

[@jeffersonsjunior]

Diegao poderia fazer um video criando um app basico usando as features do next/image, next/link , e a nova maneira de usar o getStaticProps e getServerSide

[@luisotavio2040]

Muito bom o vídeo, parabéns. Só não entendi muito bem sobre a mudança do Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR)

[@Carlosh733]

Videos práticos, POR FAVOR!

[@giovanniperrotta2658]

Fala Diego, obrigado pelas informações, um vídeo pratico mostrando isso tudo seria incrível.

[@thymarques]

Eu acabei de ver um vídeo oficial da galera do next, tá ficando iradooo!!

[@viniciusrangel544]

eu precisei do layout frc semana passada :( o projeto foi entregue essa semana, será que vale atualizar?

[@developerinexplicavel]

caraca desse jeito vou ficar no basico sempre pq atualiza kkkkkkkkkk sempre

[@xx-fw1yq]

Ótimo conteúdo, eu gostaria de ver mais sobre essas atualizações pq amo Next.js

[@Edu-SanDevIstan]

Trás mais vídeos sobre NEXT13 aí por favor! Ainda tem pouco conteudo sobre, mostrando a fundo mesmo sobre as features novas.

[@weligton_ferreira]

Show! É muito legal ver a evolução desse framework, gosto muito dele, ansioso pelas aulas práticas!

[@MarceloGomes-wp5ln]

Pensei que Turbopack seria o grande diferencial

[@aleodoni]

Aguardando ansioso pelos vídeos práticos !!!

[@marciosardou5475]

Acordei hoje imaginando que esse vídeo seria postado kkkkk, parabéns diego, por favor continue trazendo conteúdo de nextjs

[@jonatasge]

Acredito que o Nextjs tem se tornado cada vez mais um framework de nível Full Stack, mas acredito que o objetivo ainda é ser um Back end para servir o front end, e não juntar tudo em um único projeto.

[@Gabriel-zt7pk]

E o Next segui revolucionando kkk incrivel!

[@nennogabriel]

o próximo NVL poderia rolar um monorepo tbm hien.. ou melhor.. um turborepo ^^

[@vincentvega2201]

eu odeio estilizar essa tag Image, ainda bem que melhorou 🤩

[@ricardoalmeida7607]

Diego, obrigado. Claro que gostaríamos de ver estas novas características do Nextel na prática. Valeu por fazer um resumo destes recursos.

[@rafaelcostamoura]

Bom dia, novidades boas, esse TurboPack tbm promete.

[@leandroramos1990]

Com certeza um video explicando essa nova forma de fetch seria ótimo.

[@Black_void375]

Comecei a usar o next recentemente nos meus projetos acompanhei ontem a conf, cara como está evoluindo o front! Absurdo!