Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50

  Рет қаралды 125,415

Rocketseat

Rocketseat

Күн бұрын

Пікірлер: 267
@calieno2k8
@calieno2k8 2 жыл бұрын
esta na hora de rever esse video sim. Esse um tipo de video que merece uma revisão pelo ao menos uma vez ao ano.
@jorgylemos
@jorgylemos Жыл бұрын
No Next13 você faz essas mesmas configurações? Fiz igual e até agora não deu problema. Só essa adição da pasta app que não entendi muito bem, pesquisei na própria documentação e parece que ainda continuo confuso kkkk. Não sei é uma evolução do que a gente fazia: const Home: NextPageWithLayout = () => { return ( Hello World ) } Home.getLayout = (page) => ( {page} ) ou se é o contrário disso... buguei, kkkk.
@marcuuscardoso
@marcuuscardoso Жыл бұрын
@@jorgylemos eles acabaram de lançar um vídeo de Next13, vê lá!
@lucasneves8714
@lucasneves8714 4 жыл бұрын
Este vídeo é simplesmente incrível! É bastante chato configurar todas essas coisas juntas, sozinho, sem nenhuma base. Neste formato, não só ficou bem explicado o funcionamento de cada config, como a aplicação delas funciona eprfeita em conjunto. Valeu Diegão, GG RocketSeat!
@alexandrefernandes793
@alexandrefernandes793 4 жыл бұрын
Quase nunca comento em vídeos, mas gostaria de dar os parabéns para a Rocketseat e para o Diego, conteúdo é sempre de qualidade e bem estruturado, de Dev para Dev. Parabéns.
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Alexandre!!! Obrigado pelo feedback!!! 💜💜😍
@diegolikescode
@diegolikescode 4 жыл бұрын
Adorei! Terminei o bootcamp a pouquíssimos dias, arranjei um estágio e estou me dando muito bem! Obrigado aí por tudo rapaziada! Tô esperando um vídeo de templatezinho desse com projetos de backend em Typescript! Nois!
@rocketseat
@rocketseat 4 жыл бұрын
Opa! Deve vir em breve também! Parabéns pela conquista e sucesso na nova jornada!! 🚀💜💜
@joaovictormendesavila6936
@joaovictormendesavila6936 4 жыл бұрын
Cara um dos meus vídeos favoritos certeza!! ficou muito top, parabéns por sempre estar dando esse apoio a comunidade com conteúdos de qualidade.
@rocketseat
@rocketseat 4 жыл бұрын
Que massa João!! Valeeu pelo feedback! 💜💜
@revolutionary_tower
@revolutionary_tower 4 жыл бұрын
Seria massa um vídeo falando sobre o babel e webpack, imagino que o assunto não é muito prático mas eu tenho muitas dúvidas sobre o funcionamento dele, o webpack eu mal sei pra que serve. Acho a didática do diego muito incrível!
@rocketseat
@rocketseat 4 жыл бұрын
Boa!! Valeeu pela sugestão Rayon! 💜
@franciscogabriel6514
@franciscogabriel6514 3 жыл бұрын
Muito obrigado, Diego e Rocketseat. Vale muito a pena acompanhar suas aulas, fazem grande diferença na minha vida profissional!
@raulpivaburigo4421
@raulpivaburigo4421 4 жыл бұрын
Muito bom, Diego! Uma dica, no minuto 28, quando deu o erro na empty interface, o próprio vs code traz o quick fix para adicionar a exceção à regra na linha ou no arquivo todo
@tiagoc9754
@tiagoc9754 4 жыл бұрын
Por volta dos 38:35 você utilizou o logo como component. Como fica a questão de acessibilidade? Alt, title, aria, etc.
@zevdvlpr
@zevdvlpr 4 жыл бұрын
Eu sempre uso Next.js com Typescript nos meus Projetos React. Recomendo bastante, ele agiliza muito na hora de buildar o projeto, pois usando o create-react-app tem muita dependência que ocupa muito espácio aí fica complicado pra iniciar o projeto pra que tem um pc/notebook ruim.
@rocketseat
@rocketseat 4 жыл бұрын
💜💜💜😍
@farbauth
@farbauth 4 жыл бұрын
Percebi isso há pouco tempo e vou concordar contigo, man...
@leandroreal5258
@leandroreal5258 4 жыл бұрын
Sensacional, será se zerar o canal da rocketseat já dá as 10000 hrs pra ficar top, como sempre conteúdo excelente
@Guarumidia
@Guarumidia 4 жыл бұрын
As 10 mil não sei, mas que já sou um desenvolvedor melhor graças à rocketseat isso tenho certeza
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Leandro! Valeeu pelo feedback! 💜
@oakleychandler3697
@oakleychandler3697 3 жыл бұрын
sorry to be so off topic but does any of you know of a trick to log back into an instagram account?? I somehow forgot the login password. I love any assistance you can give me!
@fletcherdominic5931
@fletcherdominic5931 3 жыл бұрын
@Oakley Chandler Instablaster =)
@elsonaraujojr
@elsonaraujojr 2 жыл бұрын
Está na hora de atualizar esse vídeo rs as atualizações do nextjs e suas lib`s ... Forte abraço!
@DiogoMoreira0610
@DiogoMoreira0610 2 жыл бұрын
muito bom.... ta na hr de um review deste video hein...
@brenohenrique5004
@brenohenrique5004 4 жыл бұрын
Fala dev, tudo belezura Diego ? cara você poderia fazer um vídeo falando da distro que esta utilizando, quais ferramentas mais utiliza no Linux e tal, para ir dando um norte. valeu ai por tanto conteúdo que ajuda demais a comunidade!
@renansouza351
@renansouza351 4 жыл бұрын
Muito top!!! Esperando vocês fazerem mais conteúdos com Next.js
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Renan! Valeeeu pelo feedback! 💜💜
@mauriciorenan2942
@mauriciorenan2942 4 жыл бұрын
Muito bom! Vocês pretendem fazer algum vídeo relacionado à hospedagem de projetos Next? Se vale mais a pena Vercel, AWS, Azure, etc? acredito que seria um tema interessante hahaha... Btw, ótimo vídeo!!
@MrMatheus195
@MrMatheus195 4 жыл бұрын
up
@RegisCrysis1
@RegisCrysis1 4 жыл бұрын
boaa, tenho curiosidade tbem
@matheusaraujo8617
@matheusaraujo8617 4 жыл бұрын
up
@victorBrapp
@victorBrapp 4 жыл бұрын
Vercel é muito bom pois é de graça tem cdn para qualquer lugar do mundo e funciona muito bem
@wagaodev
@wagaodev 4 жыл бұрын
Se não tem no canal da rocket tem no do deschamps. Mas que eu lembre tem esse video falando sobre ( Acredito que seja no do deschamps )
@fmontone
@fmontone 4 жыл бұрын
Esse vídeo saiu no dia certo! 🙌🙌🙌 Eu estava pesquisando justamente esse tipo de boilerplate.. perfeito! Valeu!!
@rocketseat
@rocketseat 4 жыл бұрын
Que massa Fábio!! Só vai!! 🚀🚀
@fmontone
@fmontone 4 жыл бұрын
@@rocketseat já estou tendo problemas com o root import e travei nisso kkk
@gilney.mathias
@gilney.mathias 4 жыл бұрын
Lidar com Eslint, Prettier e babel no começo dos projetos é a coisa mais chata de todas pra mim kk' Vlw por mais um ótimo video!
@rocketseat
@rocketseat 4 жыл бұрын
Hahaha até acostumar é bem chatinha mesmo. Valeeu Gilney! 🚀💜
@fdantasr
@fdantasr 4 жыл бұрын
Realmente. Fora os problemas que a gente acaba tendo no início do projeto. Um exemplo mesmo é o bug no Parsing que está ocorrendo agora por conta de não haver suporte do Eslint para a versão 2021 do Ecma.
@fabioramatis2373
@fabioramatis2373 4 жыл бұрын
conteudo excelente como sempre! estou adorando esses conteudos sobre next.js, traz mais pls !
@rocketseat
@rocketseat 4 жыл бұрын
Fala Fabio! Valeeu pelo feedback! 💜💜
@luanccp
@luanccp 4 жыл бұрын
Video top! @Diego como você configuraria o SEO junto com o NEXT? Você acha legal usar NEXT para uma landpage? Ou é uma basuca para matar uma formiga?
@wizzard8671
@wizzard8671 4 жыл бұрын
Cara ficou muito bom o conteudo, parabéns! Poderia fazer algum conteudo com os testes iniciais dessa estrutura? Estou tendo algumas dificuldades pra configurar eles.
@ronnyacacio9944
@ronnyacacio9944 4 жыл бұрын
Não consigo acompanhar, é muito vídeo 🤣 Valeu pelo excelente conteúdo Rocket 💜
@rocketseat
@rocketseat 4 жыл бұрын
Vocês que lutem hahahaha 💜
@maykonlacerda5410
@maykonlacerda5410 4 жыл бұрын
@@rocketseat Hahahahah, nem foi pra mim mas serviu igualzinho
@karylchesman2475
@karylchesman2475 3 жыл бұрын
Alguém da um help aí! Assisti esse vídeo agora, segui todos os passos a risca, e tô tendo problemas ao tentar carregar imagens png,jpj entre outras, qualquer uma que não seja svg :\ O Next ta na versão 11, e uma coisa que percebi é que sempre que rodo o "yarn dev" ele apaga a referência "/// " do arquivo next-env.d.ts... Porém consegui testar com essa referência lá e não funciona de jeito nenhum, tanto usando a tag como usando a next/image( ). Alguém sabe se da versão usada no video para 11 mudou a forma de configurar a importação de imagens fora da pasta public?
@Felipe360x
@Felipe360x 4 жыл бұрын
Fala Diego. Para aplicar correções ou, no caso desse vídeo, desabilitar regras do ESLint, basta passar o mouse no Quick Fix que aparece quando o ESLint reclama. Ali tem opção para desativar a regra na linha ou no arquivo todo. Abraços
@rocketseat
@rocketseat 4 жыл бұрын
Fala Felipe! Essa é uma boa solução para pequenos ajustes, mas para evitar fazer isso para cada regra que você quiser mudar e acabar com inúmeras exceções acaba sendo melhor configurar diretamente nele. Ainda mais quando falamos em criar um template para aplicações. 💜
@astolfoFredor
@astolfoFredor 9 ай бұрын
Ou, como faz pra trocar aquele quadradinho com a cor gerada no CSS e deixar ela assim, formando um background completo no código da cor?
@murilorerisondesousapaz5065
@murilorerisondesousapaz5065 Жыл бұрын
Com a nova atualização com next da doc do react: hoje utilizaria Tailwind ou StyledComponent?
@thallysfreitas8087
@thallysfreitas8087 4 жыл бұрын
Ótimo vídeo! Adoro a sua didática, simples e direta. Parabéns!
@rocketseat
@rocketseat 4 жыл бұрын
Falaaa, Thallys! Didática do Diego é incrível, né!? Valeeeu! 💜 😍
@tiagoc9754
@tiagoc9754 4 жыл бұрын
Muito bom o vídeo. Tirando a parte do Next (que eu estou começando a estudar), o restante é muito parecido com o que eu sigo. Além destes que você colocou, eu geralmente adiciono husky, dotenv, apollo ou relay, e graphql. Às vezes i18n também
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Tiago! Que show! 💜🚀
@leonardobraz5223
@leonardobraz5223 4 жыл бұрын
#PR Oi, turma. Conteúdo sensacional sempre. Eu queria que vocês opinassem nesse novo hype que está saindo na comunidade com SSR. Demoramos muito tempo pra estruturar uma ideia fenomenal que é client-side com mais responsabilidades (e olha que tô nessa desde o Ember, Backbone, Mocha, Angular's) e agora voltar pra trabalhar com renderização no server... Parece aquelas piadas de que em 2020 temos tutoriais de como converter sistemas monolitos em microserviços e futuramente terá guias para voltar ao monolito (que com certeza vai ter um nome mais gourmet pra tentar disfarçar, assimilando ao SSR para tecnologias que trabalham no server kkk)
@rocketseat
@rocketseat 4 жыл бұрын
Hahaha. Valeeu pela pergunta, Leo!! #PR 💜💜
@gabrielcoelho1170
@gabrielcoelho1170 4 жыл бұрын
Excelente vídeo! Eu nem sabia da possibilidade de usar Cypress e Jest juntos haha. Seria bacana demais um vídeo introduzindo o Cypress :)
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Gabriel! Valeu pelo elogio, e pela sugestão! 💜💜
@kayorenato
@kayorenato 4 жыл бұрын
"Eita Geovana, que foi que eu fiz?" kkkkkkk Vai com calma Geovana 🤣🤣🤣🤣🤣
@evertonlimaaleixo1084
@evertonlimaaleixo1084 3 жыл бұрын
Opa! Ótimo video! Fiquei com uma dúvida, o meu arquivo global.ts não completa, nem faz sugestões sobre o CSS. Preciso fazer mais algum passo?
@brunoeduardodesouzamedeiro1397
@brunoeduardodesouzamedeiro1397 4 жыл бұрын
A estrutura ficou muito boa! Acho que também seria interessante configurar os react-hooks no eslint e os root imports, mas os dois são bem fáceis de fazer
@rocketseat
@rocketseat 4 жыл бұрын
Faala Bruno! Valeeu pelo feedback. Sim, com certeza, mas esses outros ajustes é mais tranquilo de fazer mesmo conforme a necessidade! 💜
@leonardojaques6586
@leonardojaques6586 4 жыл бұрын
Muito massa! Tentando entender o que eu fiz errado pra ta tomando um erro do eslint. "Parsing error: Invalid value for lib provided: es2021" quando boto o mouse em cima do "import" React from ou import Head from :/
@thiagotk987
@thiagotk987 4 жыл бұрын
Eu estava com esse problema também! Pra resolver eu fui dentro do arquivo .eslintrc.json, dentro da opção "parseOptions" em "ecmaVersion" eu troquei de 12 para 11 e resetei o Eslint, Até o momento esse erro sumiu
@dyja007
@dyja007 4 жыл бұрын
segue a correção github.com/typescript-eslint/typescript-eslint/issues/2468 abs!
@LittiNg_
@LittiNg_ 4 жыл бұрын
Esse é um erro que está acontecendo por conta da nova versão do EcmaScript 2021, a qual ainda por enquanto não possui suporte para o TypeScript. No mais segue aí a dica do Thiago que vai funcionar sem problemas :)
@fdantasr
@fdantasr 4 жыл бұрын
@@thiagotk987 como resetou o Eslint?
@feliepdusurf
@feliepdusurf 4 жыл бұрын
@@thiagotk987 Como resetou teu EsLint? trocou tb em Env para 'es2020' ?
@davysson
@davysson 4 жыл бұрын
Prometeram e estão insanos mesmo, vocês são fodas.
@rocketseat
@rocketseat 4 жыл бұрын
Vocês que lutem hahahaha
@davysson
@davysson 4 жыл бұрын
@@rocketseat O bom guerreiro nunca volta da guerra sem sua espada ensanguentada. Vamos lutar!
@LeandroCorso
@LeandroCorso 4 жыл бұрын
Quando eu crio um StyledComponent eu gosto de injetar o theme, acho que assim a sintaxe fica mais legível, gosto pessoal... export default createGlobalStyle`${({ theme }) => ` * { margin: 0; padding: 0; box-sizing: border-box; } body { background: ${theme.colors.background}; color: ${theme.colors.text}; } `} `
@guilhermeaugusto1404
@guilhermeaugusto1404 4 жыл бұрын
Traz mais videos sobre Next.JS , uma explicação mais aprofundada sobre como funciona, quando usar.
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Guilherme! Valeeu pela sugestão! 💜
@DhenysonJhean
@DhenysonJhean 3 жыл бұрын
Ola guys, alguém sabe informar como qual arquivo mexer ou conf, para resolver meu problema de EsLint e Prettier só funciona em arquivos de .jsx, não definir este valor em lugar nenhum, ja mexi em todos arquivos e não consigo resolver.
@DhenysonJhean
@DhenysonJhean 3 жыл бұрын
Eu poderia excluir o comentário, mas prefiro responder caso alguém tenha cometido o mesmo erro que eu. Abrindo o arquivo de configuração do VsCode (no Windows CTRL+SHIP+P e digita JSON), abrindo Preferences? Open Settings (JSON), seguindo o vídeo no valor "editor.defaultFormatter" estava "vscode.typescript-language-features", não estou usando Typescript por isso o erro, então mudei para "vscode.typescript-language-features".
@VerdadeTop
@VerdadeTop 3 жыл бұрын
Opa, que video maravilhoso! Uma pergunta: eu preciso estar usando as extensoes de Eslint e Prettier - Code Formatter ??
@lucasbastos8019
@lucasbastos8019 4 жыл бұрын
Muito massa, parabéns! Façam mais conteúdos com NextJS! Hahaha
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Lucas! Valeeu pelo feedback! Faremos sim!! 💜💜
@paulohenriqueoliveirasanta6092
@paulohenriqueoliveirasanta6092 4 жыл бұрын
Fala Diego! Vídeo e conteúdo show de bola (como sempre). A dúvida que fica é: porque mudou do CRA pro CNA? Faz sentido mudar mesmo que meu site seja client-side-rendering? Abraços!!!
@thalesalonso4046
@thalesalonso4046 4 жыл бұрын
Mano que conteúdo massa. Muito bom mesmo, didática incrível.
@rocketseat
@rocketseat 4 жыл бұрын
Valeeu pelo feedback, Thales! 💜💜
@WagnerDavinci
@WagnerDavinci 4 жыл бұрын
Caramba bom demais, eu não sabia sobre o SWR, eu ontem estava fazendo manutenção em um site com next que eu usei o isomorphic-fetch. Muito top o conteúdo de vocês. Gostaria de sugerir conteúdo: deploy de aplicações strapi integrado com next, tenho reparado que a galera ta usando muita essa combinação. Abraço!
@wolvesmedia9786
@wolvesmedia9786 4 жыл бұрын
PS C:\myproject> yarn dev yarn run v1.22.10 warning package.json: No license field error Command "dev" not found. Alguém pode me ajudar? ocorre esse erro ao executar YARN DEV
@fabioms1000
@fabioms1000 3 жыл бұрын
Diego, sobre a tipagem do componente. Vi na documentação do Next que podemos usar a tipagem NextPage invés de React.FC. >> import { NextPage } from 'next' >> const SignIn: NextPage = () => {
@rocketseat
@rocketseat 3 жыл бұрын
Faaala, Fábio! 🚀 Valeu demais pela dica! 😉
@JeffersonSilva-mc2xz
@JeffersonSilva-mc2xz 4 жыл бұрын
Estava tentando usar o next e esse vídeo veio na hora certa, muito top. Teria como fazer um vídeo falando sobre a hospedagem da vercel ??
@victorBrapp
@victorBrapp 4 жыл бұрын
É muito boa. Tem cdn e é grátis e rápida.
@edu-correia
@edu-correia 3 жыл бұрын
Esse tutorial funcionou pra alguém em 2021? O meu ta dando erro no next-images
@renanbritz3459
@renanbritz3459 4 жыл бұрын
38:54 Quando você diz que fazer requisições pra cada imagem é o pior jeito, você se refere somente a imagens svg? Porque se parar pra pensar, tendo todas as imagens no documento html vai tornar o site lento, pois todas as imagens serão baixadas de forma síncrona, não vai ficar em cache e etc...
@revolutionary_tower
@revolutionary_tower 4 жыл бұрын
Acredito que ele quis dizer que nem todas as imagens ficam no mesmo servidor, normalmente imagens assim vc utiliza um serviço a parte, como um bucket. o svg é só código e pode ser trafegado sem maiores problemas, claro q pra avatares e imagens bitmap e etc n tem como usar o formato .svg
@jhonboandio
@jhonboandio 2 жыл бұрын
Diego, eu fiz exatamente como está no vídeo, mas no momento de desabilitar o javascript, meus estilos somem :(
@simeithander
@simeithander 4 жыл бұрын
faz um video ai falando do KDE que vc usa, quais as personalizações e se é o kubuntu ou KDE Neon.
@revolutionary_tower
@revolutionary_tower 4 жыл бұрын
O Guilherme Rodz fez um video muito bem explicado sobre customização do KDE
@simeithander
@simeithander 4 жыл бұрын
@@revolutionary_tower massa vc sabe dizer qual foi? Eu procurei mas não achei, o único vídeo que vi foi dele falando por que mudou do Mac pro Linux que era devido ao hardware ser mais barato e que ele precisava mais de processamento.
@revolutionary_tower
@revolutionary_tower 4 жыл бұрын
@@simeithander kzbin.info/www/bejne/nl6ppHpjhtWanKs na hora!
@paulospiguel
@paulospiguel 4 жыл бұрын
Fala Diego sou muito seu fã e pra mim vc é o "Sr. Miyagi" dos Devs. Mais minha dúvia é: Utilizado o NextJS posso criar aplicações complexas com muitas regras de negocio e consultas a um backend (API RESTFULL), usando renderização de graficos, geração de pdf, redux, JWT, entre outros? Ou ainda o create react app tradicional ainda é a melhor opção para este tipo de aplicação? Resumindo, com o nextJS posso fazer de tudo (sem exceção) o que uma aplicação comum com CRA faz?
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Paulo! É possível fazer muita coisa sim, inclusive com as vantagens que ele tem, pode se tornar até melhor para muitos dos casos! 💜
@srsilva2
@srsilva2 3 жыл бұрын
Perfeição, muito obrigado pelo conteúdo.
@MelquiMartins42
@MelquiMartins42 2 жыл бұрын
Um junior na terra de seniors...
@tiagoc9754
@tiagoc9754 4 жыл бұрын
Por volta dos 13:45 vc diz que não precisa importar o React, mas faz isso pelo lint. Importar pacotes que não estão sendo utilizados não vai impactar no tamanho do app ou deixar o build mais pesado?
@CarlosEduardo42
@CarlosEduardo42 4 жыл бұрын
Na verdade, o React está sendo utilizado. O Next.js não precisa que você o importe nos seus arquivos. Mas como isso é implícito, o eslint ainda reclama. Foi por isso.
@tiagoc9754
@tiagoc9754 4 жыл бұрын
@@CarlosEduardo42 obrigado
@felipemillhouse
@felipemillhouse 4 жыл бұрын
Se já tenho um projeto usando JS e configuro o typescript, sabe dizer se tem como o ESLINT tratar (parse) os arquivos JS e TS de forma diferente?
@mpgx.c
@mpgx.c 4 жыл бұрын
Porra Diegão, #Onfire kkk porrada de conteúdo.... Fera demais.. ⚛️
@rocketseat
@rocketseat 4 жыл бұрын
É só o começo haahha 💜💜
@MrPaminondas
@MrPaminondas 4 жыл бұрын
Salve, Diego. Algum motivo específico para ter escolhido o KDE? Honestamente, estou usando o GNOME há mais ou menos 1 ano e meio, e tenho tido diversas issues com componentes visuais que me fazem ter vontade de migrar de desktop envioroment.
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Bruno! Essa você pode mandar para ele lá no Discord também 😄. Mas a liberdade na personalização com certeza foi um ponto bastante considerado! 💜
@victorlimavocals
@victorlimavocals 4 жыл бұрын
Qual gnome vc tá usando? O do ubuntu? Se for, eu não gosto mt desse não, mas talvez seja uma boa idéia pra tu testar o gnome mais original do Fedora ou do PopOS (recomendo o Pop). Se não, recomendo testar o cinnamon, que é padrão no linux mint. Atualmente uso ele pq o GNOME tava dando uns problemas de compatibilidade com minha placa de video.
@lucasguima
@lucasguima 4 жыл бұрын
demais conteúdo, valeu msm! testando em um projeto Next.js estou com conflito do Eslint e do Prettier na regra "object-curly-newline". a cada save, ele coloca e tira de mais de uma linha. não achei como desabilitar no Prettier, como vc fez para o singleQuote e outros, sabe me dizer comofas? valeu!
@matheusneves688
@matheusneves688 4 жыл бұрын
Show de bola, parabéns pelo conteúdo!
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Matheus! Valeeeu pelo feedback! 😍💜
@vagnermengali4110
@vagnermengali4110 Жыл бұрын
O passo a passo desse video ainda continua sendo o mesmo processo da versão atual do next.js?
@MrMatheus195
@MrMatheus195 4 жыл бұрын
Mesmo eu estudando há um tempinho o NextJS, eu fico em dúvida ao quando eu deva criar uma API usando o Next e quanso eh devo criar da forma "tradicional".
@MrMatheus195
@MrMatheus195 4 жыл бұрын
@@xdrap1 Cara eu falei isso porque em muitos casos (no reddit do nextjs eu vi bastante isso) eu vejo gente criando as APIs a parte do NextJS, pelo motivo de "desacoplamento" ou por simplesmente querer usar outra linguagem. A decisão de desacoplamento que me traz dúvidas.
@murilorerisondesousapaz6581
@murilorerisondesousapaz6581 Жыл бұрын
tive problema para instalar o inline-react-svg, o next reclama que não posso ter um .babelrc ou babel.config.js, pois está usando o next.js Compiler
@maiconsilva8628
@maiconsilva8628 4 жыл бұрын
Só faltou configurar o path aliases pra facilitar os imports! nextjs.org/docs/advanced-features/module-path-aliases Muito bom o vídeo
@rocketseat
@rocketseat 4 жыл бұрын
Boa!! Valeu pelo feedback, Maicon! 💜
@gabrielmenezes6141
@gabrielmenezes6141 4 жыл бұрын
Salve Diego, para a criação de um sistema com Dashboard e tudo mais, estilo GoBarber, é recomendado utilizar o React puro ou o Next ajuda ?
@henricopiubello4012
@henricopiubello4012 3 жыл бұрын
TOOOOOOOP demais !!! Valleeeeuuuu
@diogoluis6179
@diogoluis6179 4 жыл бұрын
Houve alguma atualizaçao no nextjs sobre o _document? Parece que ao adicionar esse metodo render com uma head geral duplica as tags na build
@juanvictorDev
@juanvictorDev 2 жыл бұрын
Aulas e Cursos 👏🔥
@RaydenNnN
@RaydenNnN 4 жыл бұрын
Fala ai minion gigante, cara eu acho uma bobiça gigante tu trocar o style guide standard sendo que o vídeo todo tu demonstrou já estar acostumado com o style guide airbnb. Mas show de bola o vídeo! Obrigado!
@deyvischarles
@deyvischarles 3 жыл бұрын
*Qual ferramenta vocês utilizam para fazer logos SVG naquele formato novo? Eu uso illustrator 2020 mas gera um svg bagunçado :(*
@Leonardo-ux3fg
@Leonardo-ux3fg 3 жыл бұрын
Em algum lugar o Diego ja mostrou essa configuração do KDE que ele fez?
@AlvesCleiton
@AlvesCleiton 4 жыл бұрын
13:52 "Eita, Giovana"! kkkkk
@gabrielpaz2148
@gabrielpaz2148 4 жыл бұрын
Ótimo vídeo, estou trabalhando com nextjs em um projeto e gostaria de saber se tem como usar tanto SSR quando SPA em um mesmo frontend?
@bruh291
@bruh291 4 жыл бұрын
Galera, se alguém puder me ajudar: segui o video certinho, com styled-components e tal. Mas quando eu tentei colocar uma div com background de cor diferente, um navbar, por exemplo, não consegui. Ela pega a cor do pai, no caso o Container, ou do estilo global. Alguém sabe como resolver isso?? Obrigada
@andremelo4384
@andremelo4384 4 жыл бұрын
E eu lutando faz dois dias com esse eslint e nada kkkkkkkkk
@AdrianoMoreira1994
@AdrianoMoreira1994 4 жыл бұрын
Bem massa a aula, poderia criar um vídeo mostrando como deixar o ambiente linux igual o seu rs abraço
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Adriano! Valeeeu pelo feedback e sugestão! 💜💜
@juniorpetrini3877
@juniorpetrini3877 4 жыл бұрын
como fariar para separar os tipos que estão dentro da minha pagina? criaria um 'home.d.ts' dentro da pasta pages?
@thiagobragacaldera
@thiagobragacaldera 3 жыл бұрын
Boa, gostei do vídeo, como sempre boas dicas.
@rocketseat
@rocketseat 3 жыл бұрын
Faaala, Thiago! Valeeeu! 💜 😍
@lima_life
@lima_life 3 жыл бұрын
Se alguém puder me ajudar iria ficar muito feliz. Quando eu desativo o javascript meu GlobalStyle não carrega igual o Diego fez... Fiz as mesmas coisas e mesmo assim não funciona...
@TheCEMF
@TheCEMF 4 жыл бұрын
Dale, Diego, excelente vídeo. Tava seguindo esse "boilerplate" que tu fez e fiquei com uma dúvida. Como o intellisense do seu VSCode consegue aplicar a extensão colorize e saber os atributos css dentro da sintaxe de css escopado do styled-components? Aqui isso não rolou... Acho que funciona normalmente, mas meu editor tá sem essa inteligência toda aí xD Abraços!
@victorpuntel
@victorpuntel 4 жыл бұрын
a extensão vscode-styled-components da os highlighting e o intellisense
@TheCEMF
@TheCEMF 4 жыл бұрын
@@victorpuntel Opa, obrigado pelo toque Victor, legal mesmo :)
@rocketseat
@rocketseat 4 жыл бұрын
Faala dev, Como o Victor disse, é uma extensão diferente para isso. Pesquise por "vscode-styled-components" ! 💜
@vinisaveg
@vinisaveg 4 жыл бұрын
Faaala Diegão, video massa!! você conhece a extensão Octotree? ela ajuda bastante quando você precisa vasculhar enormes repositórios no github... valeu! abraços.
@rocketseat
@rocketseat 4 жыл бұрын
Faala dev! Conhecemos sim, e utilizamos ela bastante por aqui. Inclusive recomendamos ela para nossos alunos do bootcamp em um módulo sobre ferramentas ! 💜💜🚀
@willianvieira711
@willianvieira711 3 жыл бұрын
Alguém sabe me dizer qual modelo do Teclado que ele usa ?
@AndrelinoSilvas
@AndrelinoSilvas 4 жыл бұрын
Pergunta: Se quero que o prettier adicione ponto e vírgula no final da linha, tem como fazer o eslint ignorar o ponto e vírgula? OBrigado
@rocketseat
@rocketseat 4 жыл бұрын
Fala Andrelino! Se você tiver o ESLint no seu projeto, acaba sendo mais fácil configurar nele mesmo para adicionar a vírgula. Dá uma conferida na documentação: eslint.org/docs/rules/semi
@itamar-jr-tech
@itamar-jr-tech 4 жыл бұрын
Teoricamente, no prettier, era só colocar o semi como true.
@renesilvaferreira7942
@renesilvaferreira7942 4 жыл бұрын
Opa fantástico o vídeo. Você poderia fazer um tutorial do mesmo jeito só que para react native TypeScript, ESLint e Styled Components
@rocketseat
@rocketseat 4 жыл бұрын
Faala, Renê! Valeeeu pela sugestão! 💜
@josuebarros-desenvolvedorw2490
@josuebarros-desenvolvedorw2490 4 жыл бұрын
Eu sou do VUE e uso o NuxtJS, acha que eu me adapto facil ao NextJS? Estou aprendendo React!
@pmdpaula
@pmdpaula 3 жыл бұрын
Não sei se já houve comentário sobre, mas deixarei o meu aqui. Sobre o import do React, coloco a seguinte regra: // No need to import React when using Next.js 'react/react-in-jsx-scope': 'off'
@rocketseat
@rocketseat 3 жыл бұрын
Faaaala, Pedro!! Valeu pela contribuição! 💜 🚀
@JoaoAmadoAlves
@JoaoAmadoAlves 3 жыл бұрын
Obrigado Pedro! Isso me ajudou com outro erro que eu estava tendo de Lint, que era: 'React' was used before it was defined. Com essa regra não preciso importar o React, logo não me preocupo mais com o erro :D
@alineemanuelle8417
@alineemanuelle8417 2 жыл бұрын
thanks, it actually let me through so i could download it.
@pedrocontraomundo3377
@pedrocontraomundo3377 4 жыл бұрын
Diego faz um de react native tb Aquele projetão brabo 2020
@rocketseat
@rocketseat 4 жыл бұрын
Opaa! Valeeu pela sugestão, Pedro! 💜
@brunomello7499
@brunomello7499 3 жыл бұрын
Alguém mais ta tendo problema com 'React was used before it was defined'? to apanhando que nem louco pra conseguir resolver isso
@renanmartins31
@renanmartins31 3 жыл бұрын
Adicione as seguintes linhas nas rules do seu .eslintrc.json "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": ["error"],
@brunomello7499
@brunomello7499 3 жыл бұрын
boa, era isso mesmo, brigadão
@renanzis
@renanzis 3 жыл бұрын
Não consigo colocar pra funcionar. Faço o mesmo passo-a-passo. Mas na primeira vez que já rodo "yarn dev" , ele gera muitos warnings do tipo "There are multiple modules with names that only differ in casing", porém informa "ready on localhost:3000". O problema é que ao acessar via browser, recebo "INTERNAL SERVER ERROR". Será que alguém consegue me ajudar? no Terminal exibe esse erro: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app Estou em um PC com windows 10. versões: yarn 1.22.4, npm 7.6.3 e node v14.15.4
@IsaqueBatistaOficial
@IsaqueBatistaOficial 2 жыл бұрын
Mesmo erro aqui
@TutoDS2014
@TutoDS2014 4 жыл бұрын
Obrigado pelo vídeo! Abraço de Portugal! 😉
@rocketseat
@rocketseat 4 жыл бұрын
Valeeeu dev! Abraço! 💜💜
@thugger-m2g
@thugger-m2g 3 жыл бұрын
_document.tsx ta quebrando as regras dos hooks. Alguem arrumou?
@LeandroCorso
@LeandroCorso 4 жыл бұрын
No tsconfig.json fiz uma modificação para fazer importação absoluta de componentes e não precisar mais fazer aquela lambança de '../../../*'. "compilerOptions": { "baseUrl": "src", ... },
@LeandroCorso
@LeandroCorso 4 жыл бұрын
Não funciona para arquivos SVG inline, só se importar de forma relativa. Mesmo assim o eslint fica enchendo o saco, dizendo que o arquivo não foi encontrado ou que o tipo não foi definido. Mas pera lá, o next-images já não devia inserir também a tipagem de SVG? O que está faltando?
@popupjs
@popupjs 4 жыл бұрын
Tenho usado o react-query no lugar do SWR, tive que lidar com muitos bugs no SWR
@gustavo.saraiva
@gustavo.saraiva 4 жыл бұрын
Por favor mantenham essa música na intro !!! 🤩🤩🤩
@erikmaia9599
@erikmaia9599 4 жыл бұрын
Ótimo conteúdo parabéns
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Erik! Muito obrigado pelo feedback! 💜💜
@lucasdecalves
@lucasdecalves 4 жыл бұрын
Coisa linda ver o Linux e não o Mac rodando nos vídeos, chega arrepiar.
@lucasdecalves
@lucasdecalves 4 жыл бұрын
@@xdrap1 Eu uso MAC e não gosto.
@igorthierry
@igorthierry 4 жыл бұрын
Faz um vídeo sobre React Native Paper
@Oculterous
@Oculterous 4 жыл бұрын
Pq não utilizar o padrão do módulos próprio do nextjs para páginas ou componentes e deixar o stylos junto aos componentes como neste projeto por exemplo github.com/maccali/Site-Pessoal
@JhosephAraujo
@JhosephAraujo 4 жыл бұрын
Tem alguma previsão de sair algum codedrop sobre Next com rotas autenticadas?
@rocketseat
@rocketseat 4 жыл бұрын
Fala, Joseph! Ainda não, mas valeu pela sugestão!! 💜💜
@adriel_borges
@adriel_borges 4 жыл бұрын
Esse vídeo ainda vale mesmo para a versão 10 do next.js ?
@ermelindaabreu9158
@ermelindaabreu9158 3 жыл бұрын
Oi Diego! Teria como fazer um vídeo explicando como configurar o Redux e o Redux-Saga no Next.JS?
@rocketseat
@rocketseat 3 жыл бұрын
Faaaala, Ermelinda! Vou anotar sua sugestão e passar pro pessoal, viu!? Valeeeu! 💜 😍
@ermelindaabreu9158
@ermelindaabreu9158 3 жыл бұрын
@@rocketseat valeu demais! Vou ficar aqui na expectativa
Unit Test Nedir ? NestJS ile Unit Test Nasıl Yazılır ?
22:40
Utilizando as refs no React de forma avançada | Code/Drops #52
33:46
TypeScript com ReactJS, Redux e Redux Saga | Diego Fernandes
50:43
COMEÇANDO NO REACT.JS EM 2022
45:41
Rocketseat
Рет қаралды 399 М.
Dominando o React Query
27:27
Matheus Castro
Рет қаралды 115
TypeScript, o início, de forma prática | MasterClass #07
1:10:24
Rocketseat
Рет қаралды 245 М.
Utilizando React.memo | Code/Drops #18
19:20
Rocketseat
Рет қаралды 89 М.