Тёмный

React - Migrando projeto CRA para Next.js - Code/drops #79 

Rocketseat
Подписаться 367 тыс.
Просмотров 15 тыс.
50% 1

O Next.js é um framework React que está muito em alta atualmente e é comum termos projetos criados sem a tecnologia que precisem utilizar recursos da mesma como renderização pelo servidor (SSR), páginas estáticas (SSG) e indexação dos mecanismos de busca (SEO).
Nesse vídeo vamos entender como adotar de forma incremental o Next.js em conjunto com um projeto em React (create-react-app) mantendo ambos projetos funcionais e comunicando entre si.
-----
Confira a grade completa de conteúdos do canal aqui: rocketseat.com.br/conteudo
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: www.rocketseat.com.br​​​​​​​​
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
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
Nos ouça também no Spotify:
- Podcast Faladev
- Podcast Alumni
- Podcast Proxy

Опубликовано:

 

13 июн 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 85   
@cassiolacerda2486
@cassiolacerda2486 3 года назад
10:22 comando para windows (Power Shell) SEM precisar instalar nenhum package adicional: "start": "set PORT=4000 && react-scripts start",
@drgabbo1025
@drgabbo1025 Год назад
boa
@JeanMartinsRoss
@JeanMartinsRoss 3 года назад
Excelente tópico e abordagem! Posta mais sobre micro front-ends sim 🚀
@matheusnascimento4793
@matheusnascimento4793 3 года назад
6:22 isso na verdade é um problema especifico do KDE Plasma relacionado a uma limitação na lixeira. da pra resolver indo nas configurações do Dolphin, na parte de Lixeira, e remover a limitação. mas de qualquer forma, o VS Code (e vários outros apps) funcionam bem melhor em ambiente GTK (GNOME, CINNAMON, XFCE, MATE, BUDGE, I3)
@shirayukiDev
@shirayukiDev 3 года назад
Exatamente o que eu precisava, Boa Diego Excelente conteúdo.
@rocketseat
@rocketseat 3 года назад
Que show, Alessandro! Valeu demais! 😍 💜
@matheuscruz1195
@matheuscruz1195 3 года назад
Belo conteúdo Diegão, parabéns
@rocketseat
@rocketseat 3 года назад
Que massa que curtiu, Matheus! Bem útil, né!? Valeu demais! 💜
@kesleydaviddev5569
@kesleydaviddev5569 3 года назад
Muito bom, eu tinha exatamente essa dúvida sobre como poderia ser feito, parabens a todos !
@rocketseat
@rocketseat 3 года назад
Faaaala, Kesley! Que massa que te ajudamos com essa dúvida! 💜 😍
@marcus48106
@marcus48106 3 года назад
Show demais, quero ver muito conteudo sobre MF e BFF no CD da Rcoket
@contiero_
@contiero_ 3 года назад
Muito bom conteúdo!
@rocketseat
@rocketseat 3 года назад
Que show que curtiu! 💜
@juniorsk65
@juniorsk65 3 года назад
Fala Diego, parabénns pelo conteúdo. Fala mais sobre microfrontends, realmente está cada vez mais em alta, recomendo dar uma olhada no Single SPA ou Module Federation do webpack5.
@FilipeMoraes87
@FilipeMoraes87 3 года назад
Excelente vídeo. Manter o contexto entre as apps pode ser mais complicado mas compensa muito utilizar Nextjs, é muito rápido.
@rocketseat
@rocketseat 3 года назад
Exatamente, Filipe! Que massa que curtiu o conteúdo! 💜 🚀
@joaoluis7926
@joaoluis7926 3 года назад
Mais que maravilha 😍
@rocketseat
@rocketseat 3 года назад
Curtiu, João!? 👀 💜
@joaoluis7926
@joaoluis7926 3 года назад
@@rocketseat sensacional 💜
@lennonlemos455
@lennonlemos455 3 года назад
Top! 👏👏👏
@rocketseat
@rocketseat 3 года назад
Valeu demais, Lennon! 💜
@robertoumbelino6286
@robertoumbelino6286 3 года назад
Baita conteúdo Diegão 😄, quem diria que seria algo tão simples de configurar. Um vídeo de mono repo seria muito fera mas de PWA seria mais maravilhoso ainda haha ❤️
@pablodanilo2481
@pablodanilo2481 3 года назад
Concordo @Roberto, dois conteúdos sensacionais!!
@rocketseat
@rocketseat 3 года назад
Curtiu, Roberto!? Maravilha! 🚀 Sugestões anotadas... 👀 💜
@gubmx20
@gubmx20 3 года назад
Boa Diego! Fala sobre o Module Federation do webpack 5, uma das maneiras de se fazer micro-frontend nos dias de hoje.
@rocketseat
@rocketseat 3 года назад
Faaaaaala, Gustavo! Sugestão anotada aqui! 💜 😍
@juloko
@juloko 3 года назад
@@rocketseat Pow uma pena PWA do NextJS não funcionar ainda com webpack 5. Tive um monte de erro com carregamento de imagens.
@edmilsonsoares255
@edmilsonsoares255 3 года назад
Diego, Salvaste a minha vida
@maiquelleites2893
@maiquelleites2893 3 года назад
show de bola...cria mais videos sobre microfrontends...
@rocketseat
@rocketseat 3 года назад
Faaaala, Maiquel! Beleza!? Opa, sugestão anotada! 💜
@pablodanilo2481
@pablodanilo2481 3 года назад
Muita massa o conteúdo!! 🚀 Mas tenho a mesma dúvida da @Catharina, como funcionaria com autenticação?
@edymbhify
@edymbhify 3 года назад
Diego mais uma vez um excelente conteúdo, você poderia explicar sobre o uso do redux-toolkit com typescript e saga, existem pouquíssimos conteúdos atualmente.
@rocketseat
@rocketseat 3 года назад
Faaaaala, Edson! Que massa que curtiu! Anotei sua sugestão aqui! Valeu demais! 💜 😍
@cassiolacerda2486
@cassiolacerda2486 3 года назад
Dá uma olhada lá no repositório do Github na pasta examples... tem vários exemplos de Redux lá.
@edymbhify
@edymbhify 3 года назад
@@cassiolacerda2486 Redux-toolkit não tem...
@guilhermesantanadev
@guilhermesantanadev Год назад
O que esta travando ai é o Git integrado no vscode... como vc tirou o gitignore a pasta node começou ser monitorada.... @Rocketseat
@xavierjece12
@xavierjece12 3 года назад
Boaaa excelente video!!! Estou precisando fazer isso na empresa agora kkk tu me salvou,. Só continuei com uma duvida, como vou fazer publicar ele agora com netlify ou vercel ? #PR
@dieegosf
@dieegosf 3 года назад
Fala Jecé, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.
@user-tl2kk1bl2i
@user-tl2kk1bl2i 2 года назад
@@dieegosf topeeee
@noriller
@noriller 3 года назад
#PR: No caso, esse redirecionamento precisaria ser pra uma pagina react? Ou se colocar uma página em outra tecnologia ele também funcionaria?
@heitorpacheco6913
@heitorpacheco6913 3 года назад
Diego, eu consigo fazer esse rewrites manualmente ? No caso redirecionar conforme uma regra de negócio.
@Ronaldo61
@Ronaldo61 3 года назад
Pode por favor falar, Qual distro vocês está usando nesse vídeo ?
@fernandobrunoboscato7236
@fernandobrunoboscato7236 Год назад
Boa tarde poreriam fazer um conteudo atualizado e mais completo com autenticação no propria api e com o google?
@JrMarquesHD
@JrMarquesHD 3 года назад
#PR Digamos que eu tenha a persistência de estado via cookies como eu faço pra compartilhar essa info entre as duas aplicações? Todas elas compartilharam o mesmo storage?
@Mannoeu
@Mannoeu 3 года назад
No caso de precisar compartilhar a sessão/usuário logado por exemplo entre as duas aplicações durante a migração, isto é, loguei pelo next, acessei uma página que ainda está no CRA, mas preciso por exemplo mostrar o usuário logado na navbar. Isso é possível?
@dieegosf
@dieegosf 3 года назад
Sim, mas o token vai precisar estar em algum local acessível por ambas aplicações, ou seja, o melhor local são os cookies. Vale lembrar que quando você navega de uma aplicação CRA para o Next ou vice-versa o que vai acontecer é um reload completo da aplicação, ou seja, todos estados são perdidos, mas no caso da autenticação podem ser recarregados normalmente se o token estiver disponível.
@Mannoeu
@Mannoeu 3 года назад
@@dieegosf massa!!
@guilhermesantanadev
@guilhermesantanadev Год назад
oi tudo bom? como você sobre isso em um servidor com nginx?
@jHallyson32
@jHallyson32 2 года назад
#PR Diego, tudo bem? Como esse redirecionamento funciona quando temos autenticação essas telas, é possível compartilhar essas informações?
@danteanjos_
@danteanjos_ 3 года назад
Pelo que entendi, é apenas um redirect... e se a outra aplicação for um Angular por exemplo? Funcionaria tbm?
@EulerAlvarenga1
@EulerAlvarenga1 3 года назад
Seria uma boa falar do microfront-end. Tenho uma aplicação rodando bem complexa e com bugs em uma versão muito antiga do react. Seria interessante ter um novo app (provavelmente cra) porém atualizado e com novas features incrementalmente?
@gabrielguimaraes5623
@gabrielguimaraes5623 3 года назад
Aí o ideal não seria um novo projeto em Next.js? Assim você melhora incrementalmente com o método usado no vídeo.
@sidneydev
@sidneydev 3 года назад
#PR Fala Diego, blz! Manda um Salve para galera de Cuiabá-MT, super empolgados com esses conteúdos. A dúvida é de como chamar uma página no Next.js passando valores com método post ou algo que mantenha os dados seguros e não públicos.
@rocketseat
@rocketseat 3 года назад
Faaaaala, Sidney! Um SALVE pra Cuiabá! 😍 Excelente ponto! Valeu demais por nos enviar a sua dúvida! 💜 🚀
@AlexandreHPiva
@AlexandreHPiva 3 года назад
Cara, faz mais vídeos sobre microfrontends!
@rocketseat
@rocketseat 3 года назад
Faaaaala, Alê! Beleza!? Sugestão anotada! Por hora, deixo esse #PR em que o Diego responde uma pergunta sobre: *Micro Frontends, Node.js, Unform, StyleSheets, Styled-components, ORMs | **#PR** 13* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YQr5CIRZ4Og.html 💜 🚀
@guilhermealbert
@guilhermealbert 3 года назад
Dá pra criar um .env pra adicionar a variável PORT=4000, sem precisar de alterar no package.json.
@dieegosf
@dieegosf 3 года назад
Boa, obrigado pela adição.
@ribeiro.evandro
@ribeiro.evandro 3 года назад
Uma dúvida, sobre o deploy dessa estratégia na Vercel, eu preciso criar projetos diferentes ou posso enviar a pasta contendo as duas aplicações?
@dieegosf
@dieegosf 3 года назад
Fala Evandro, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.
@RodrigoZacariotto
@RodrigoZacariotto 3 года назад
Essa config de proxy serve também pra arquivos da pasta public (css, js, imagens, etc) ou é somente para as rotas? Tenho uma aplicação antiga rodando e estou fazendo a migração pra JS (next), tem muito css, js e imagens nessa aplicação antiga.
@dieegosf
@dieegosf 3 года назад
Pode ser usado pra qualquer tipo de arquivo.
@Jack-ss4re
@Jack-ss4re Год назад
Qual é esse OS que vc tá usando?
@Eduardo-cx1up
@Eduardo-cx1up 3 года назад
será que vale a pena eu comprar o ignite nesse que está por vir agora, e começar mais pra frente sem acompanhar voces? e depois quando lançarem o proximo eu refaço junto mais rápido para acompanhar... Voce acha que eu ficaria perdido 'sozinho'? kkkk Porque ainda estou vendo Javascript Intermediário, e se esse próximo ignite vir no mes que vem, eu n devo conseguir terminar de ver bem js,html e css, daí eu precisaria de mais um ou dois meses pra poder começar o Ignite
@JaykonWillian
@JaykonWillian 3 года назад
Fala Diego, pq eu deveria hj em dia começar um projeto com cra ao invés de next.js? Existe algum case específico?
@mathws1
@mathws1 3 года назад
Diego, daria pra fazer o inverso? o CRA ser o proxy pro Next ao invés do Next ser o proxy pro CRA?
@dieegosf
@dieegosf 3 года назад
Não porque o CRA no fim gera uma build totalmente estática, ou seja, não tem nenhum server rodando com ele. O proxy precisaria ser feito por um terceiro dai nesse caso, tipo um NGINX que fica entre a conexão do cliente com o seu app CRA e o NGINX em si faz esse processo e não o CRA.
@jHallyson32
@jHallyson32 2 года назад
@@dieegosf #PR Diego, tudo bem? Como esse redirecionamento funciona quando temos autenticação essas telas, é possível compartilhar essas informações?
@alitonoliveira1700
@alitonoliveira1700 3 года назад
Faaaaala, Diego! Subdomínios funcionam nesse mesmo esquema de duas aplicações ou podem ser criados para uma única aplicação? Ou seja, uma aplicação com subdomínio para admin (cra ou next) e outra no endereço url principal para usuários?
@dieegosf
@dieegosf 3 года назад
Nesse caso são dois apps diferentes e tudo bem, eu particularmente sempre prefiro criar apps diferentes caso sejam acessados por pessoas diferentes.
@alitonoliveira1700
@alitonoliveira1700 3 года назад
@@dieegosf Obrigado pela dica! Como eu uso bastante o free quota da firebase pra aprender a programar, o difícil seria conectar as duas aplicações ambas com o mesmo banco de dados NoSQL, mas com registros de autenticação diferentes para que o usuário não faça login na área admin e vice-versa.
@BrendonDosReisCarvalho
@BrendonDosReisCarvalho 3 года назад
Diego, como fazer o deploy dessa estratégia para a Vercel?
@dieegosf
@dieegosf 3 года назад
Fala Brendon, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.
@luca0898
@luca0898 3 года назад
Diego, qual distro linux tu usa? Vlw pelo vídeo 🚀
@rocketseat
@rocketseat 3 года назад
Faaaaala, Luca! Beleza!? O Diego ta usando o Kubuntu! Vou deixar um vídeo do nosso querido Rodz mostrando como customiza assim: *Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h-FsG-QpgfI.html 💜 🚀
@pscover2445
@pscover2445 3 года назад
Qual é a versão do Linux que você usa? Ele já vem esse layout ou vocês editou?
@rocketseat
@rocketseat 3 года назад
Faaaaala, dev! É o Kubuntu! 💜 Vou deixar um vídeo em que o nosso querido Rodz customiza, tudo bem!? 😉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h-FsG-QpgfI.html 🚀
@pscover2445
@pscover2445 3 года назад
@@rocketseat s2 vcs são top !
@maiquelleites2893
@maiquelleites2893 3 года назад
#pr quando devo usar NEXT ou CRA ?
@rocketseat
@rocketseat 3 года назад
Excelente ponto! Anotado! Valeu demais por nos enviar sua dúvida! 💜
@tennebris5371
@tennebris5371 3 года назад
Seria possível compartilhar os contextos entre os dois projetos?
@daniel1404able
@daniel1404able 3 года назад
Local storage
@dieegosf
@dieegosf 3 года назад
Toda informação que precisa ser persistida entre sessões e compartilhada entre ambos deve ser armazenada nos cookies principalmente, a não ser que seja uma informação exclusiva da parte visual e dai pode ser usado o Local Storage.
@tennebris5371
@tennebris5371 3 года назад
Obrigados ótimo conteúdo parabéns. Ansioso para a nlw
@gabriel11776
@gabriel11776 3 года назад
Esse bug ao deletar arquivos nunca rolou comigo. Que bizarro
Далее
TUDO que você precisa saber do Next 13 (isso muda tudo)
1:09:51
Crie sua Primeira API com Node.js
10:36
Просмотров 81
O ERRO mais comum no React (você já fez isso)
13:26
Просмотров 120 тыс.
Consumindo APIs no React com SWR | Code/Drops #38
37:48
Recriando o Notion com React (editor funcionando!)
1:20:29
Next.js 13… this changes everything
6:16
Просмотров 774 тыс.
Utilizando React.memo | Code/Drops #18
19:20
Просмотров 88 тыс.