Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50
HTML-код
- Опубликовано: 7 фев 2025
- Já teve dúvidas em como iniciar o seu projeto com ReactJS? Será que uso create-react-app ou será que uso algum framework como o Next.js? E pra estilização, tanta gente fala do Styled Components, será que vale a pena?
Nesse vídeo eu demonstro a criação completa do ponto de início de uma aplicação com ReactJS incluindo Next.js, TypeScript, ESLint, Prettier, EditorConfig, Styled Components e até algumas recomedações pessoais como Jest e SWR.
Código do projeto: github.com/roc...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma:
www.rocketseat...
Acompanhe a Rocketseat nas redes sociais:
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
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.
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.
@@jorgylemos eles acabaram de lançar um vídeo de Next13, vê lá!
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!
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.
Fala, Alexandre!!! Obrigado pelo feedback!!! 💜💜😍
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!
Opa! Deve vir em breve também! Parabéns pela conquista e sucesso na nova jornada!! 🚀💜💜
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!
Boa!! Valeeu pela sugestão Rayon! 💜
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.
Que massa João!! Valeeu pelo feedback! 💜💜
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!
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
Muito obrigado, Diego e Rocketseat. Vale muito a pena acompanhar suas aulas, fazem grande diferença na minha vida profissional!
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.
💜💜💜😍
Percebi isso há pouco tempo e vou concordar contigo, man...
Sensacional, será se zerar o canal da rocketseat já dá as 10000 hrs pra ficar top, como sempre conteúdo excelente
As 10 mil não sei, mas que já sou um desenvolvedor melhor graças à rocketseat isso tenho certeza
Fala, Leandro! Valeeu pelo feedback! 💜
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!
@Oakley Chandler Instablaster =)
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!!
up
boaa, tenho curiosidade tbem
up
Vercel é muito bom pois é de graça tem cdn para qualquer lugar do mundo e funciona muito bem
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 )
Muito top!!! Esperando vocês fazerem mais conteúdos com Next.js
Fala, Renan! Valeeeu pelo feedback! 💜💜
conteudo excelente como sempre! estou adorando esses conteudos sobre next.js, traz mais pls !
Fala Fabio! Valeeu pelo feedback! 💜💜
Esse vídeo saiu no dia certo! 🙌🙌🙌 Eu estava pesquisando justamente esse tipo de boilerplate.. perfeito! Valeu!!
Que massa Fábio!! Só vai!! 🚀🚀
@@rocketseat já estou tendo problemas com o root import e travei nisso kkk
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.
muito bom.... ta na hr de um review deste video hein...
Está na hora de atualizar esse vídeo rs as atualizações do nextjs e suas lib`s ...
Forte abraço!
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!
Hahaha até acostumar é bem chatinha mesmo. Valeeu Gilney! 🚀💜
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.
Prometeram e estão insanos mesmo, vocês são fodas.
Vocês que lutem hahahaha
@@rocketseat O bom guerreiro nunca volta da guerra sem sua espada ensanguentada. Vamos lutar!
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
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. 💜
Ótimo vídeo! Adoro a sua didática, simples e direta. Parabéns!
Falaaa, Thallys! Didática do Diego é incrível, né!? Valeeeu! 💜 😍
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
Faala, Tiago! Que show! 💜🚀
Excelente vídeo! Eu nem sabia da possibilidade de usar Cypress e Jest juntos haha. Seria bacana demais um vídeo introduzindo o Cypress :)
Faala, Gabriel! Valeu pelo elogio, e pela sugestão! 💜💜
Perfeição, muito obrigado pelo conteúdo.
#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)
Hahaha. Valeeu pela pergunta, Leo!! #PR 💜💜
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
Faala Bruno! Valeeu pelo feedback. Sim, com certeza, mas esses outros ajustes é mais tranquilo de fazer mesmo conforme a necessidade! 💜
Mano que conteúdo massa. Muito bom mesmo, didática incrível.
Valeeu pelo feedback, Thales! 💜💜
TOOOOOOOP demais !!! Valleeeeuuuu
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!
"Eita Geovana, que foi que eu fiz?" kkkkkkk Vai com calma Geovana 🤣🤣🤣🤣🤣
Não consigo acompanhar, é muito vídeo 🤣 Valeu pelo excelente conteúdo Rocket 💜
Vocês que lutem hahahaha 💜
@@rocketseat Hahahahah, nem foi pra mim mas serviu igualzinho
Muito massa, parabéns! Façam mais conteúdos com NextJS! Hahaha
Fala, Lucas! Valeeu pelo feedback! Faremos sim!! 💜💜
Traz mais videos sobre Next.JS , uma explicação mais aprofundada sobre como funciona, quando usar.
Faala, Guilherme! Valeeu pela sugestão! 💜
Show de bola, parabéns pelo conteúdo!
Faala, Matheus! Valeeeu pelo feedback! 😍💜
Um junior na terra de seniors...
Porra Diegão, #Onfire kkk porrada de conteúdo.... Fera demais.. ⚛️
É só o começo haahha 💜💜
Boa, gostei do vídeo, como sempre boas dicas.
Faaala, Thiago! Valeeeu! 💜 😍
Por volta dos 38:35 você utilizou o logo como component. Como fica a questão de acessibilidade? Alt, title, aria, etc.
Aulas e Cursos 👏🔥
thanks, it actually let me through so i could download it.
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?
Obrigado pelo vídeo! Abraço de Portugal! 😉
Valeeeu dev! Abraço! 💜💜
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?
Faala, Paulo! É possível fazer muita coisa sim, inclusive com as vantagens que ele tem, pode se tornar até melhor para muitos dos casos! 💜
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 ??
É muito boa. Tem cdn e é grátis e rápida.
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 = () => {
Faaala, Fábio! 🚀
Valeu demais pela dica! 😉
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!!!
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};
}
`}
`
Só faltou configurar o path aliases pra facilitar os imports!
nextjs.org/docs/advanced-features/module-path-aliases
Muito bom o vídeo
Boa!! Valeu pelo feedback, Maicon! 💜
faz um video ai falando do KDE que vc usa, quais as personalizações e se é o kubuntu ou KDE Neon.
O Guilherme Rodz fez um video muito bem explicado sobre customização do KDE
@@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.
@@simeithander ruclips.net/video/h-FsG-QpgfI/видео.html na hora!
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!
Obrigado pelo conteúdo!
Fala, Gustavo! Nós quem agradecemos a participação de vocês. Fazemos todos os conteúdos pensando na comunidade!! 💜💜
poxa, bem bacana trabalhar com esse framework. só precisa instalar 628 bibliotecas e gastar 5horas configurando que já ta prontinho pra usar 🥰
Isso é a titulo de aprendizado, na pratica usa-se Docker ou praticas onde a estrutura inicial já vem praticamente pronta. Mas enfim, sempre haverá os dos contra.
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'
Faaaala, Pedro!!
Valeu pela contribuição! 💜 🚀
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
Com a nova atualização com next da doc do react: hoje utilizaria Tailwind ou StyledComponent?
Coisa linda ver o Linux e não o Mac rodando nos vídeos, chega arrepiar.
@@xdrap1 Eu uso MAC e não gosto.
Bem massa a aula, poderia criar um vídeo mostrando como deixar o ambiente linux igual o seu rs
abraço
Fala, Adriano! Valeeeu pelo feedback e sugestão! 💜💜
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?
Ótimo conteúdo parabéns
Fala, Erik! Muito obrigado pelo feedback! 💜💜
Thanks... it's working... Good Job...!
Opa fantástico o vídeo. Você poderia fazer um tutorial do mesmo jeito só que para react native TypeScript, ESLint e Styled Components
Faala, Renê! Valeeeu pela sugestão! 💜
Diego, eu fiz exatamente como está no vídeo, mas no momento de desabilitar o javascript, meus estilos somem :(
Por favor mantenham essa música na intro !!! 🤩🤩🤩
topp demaissssss
Diego
faz um de react native tb
Aquele projetão brabo 2020
Opaa! Valeeu pela sugestão, Pedro! 💜
Diegão podia disponibilizar a ISO dele pra gente.... ou mostrar como está o ambiente de desenvolvimento dele!
O Rodz tem um ambiente parecido, vc pode tentar dar uma olhada pra ver se curte
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?
Opa, que video maravilhoso!
Uma pergunta: eu preciso estar usando as extensoes de Eslint e Prettier - Code Formatter ??
Faz um vídeo sobre React Native Paper
O passo a passo desse video ainda continua sendo o mesmo processo da versão atual do next.js?
Like só por causa da intro
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 :/
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
segue a correção
github.com/typescript-eslint/typescript-eslint/issues/2468
abs!
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 :)
@@thiagotk987 como resetou o Eslint?
@@thiagotk987 Como resetou teu EsLint? trocou tb em Env para 'es2020' ?
Show 🚀🚀🚀
Esse tutorial funcionou pra alguém em 2021?
O meu ta dando erro no next-images
Em algum lugar o Diego ja mostrou essa configuração do KDE que ele fez?
13:52
"Eita, Giovana"! kkkkk
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!
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.
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! 💜
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.
Papo reto, fui tentar utilizar esse video pra começar a aprender React e só me lasquei. Um monte de definições de importações, parece que to aprendendo Java que só a configuração inicial é a maior parte da dor de cabeça...
Eu sou do VUE e uso o NuxtJS, acha que eu me adapto facil ao NextJS? Estou aprendendo React!
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
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?
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.
@@CarlosEduardo42 obrigado
Ó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?
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 ?
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?
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?
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...
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
Quando vai abrir vagas
25:07 Eu entendi a referência 😅, quem entendeu da like.
Sempre em busca do próximo nível! 🚀🚀
Oi Diego! Teria como fazer um vídeo explicando como configurar o Redux e o Redux-Saga no Next.JS?
Faaaala, Ermelinda! Vou anotar sua sugestão e passar pro pessoal, viu!? Valeeeu! 💜 😍
@@rocketseat valeu demais! Vou ficar aqui na expectativa
Alguém sabe me dizer qual modelo do Teclado que ele usa ?
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".
@@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.
Pergunta! Que versão do Linux vc está usando?
E mano, excelente conteúdo.
Faala, Gustavo! O Diego está usando o Ubuntu com KDE Plasma! 💜
como fariar para separar os tipos que estão dentro da minha pagina? criaria um 'home.d.ts' dentro da pasta pages?
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.
Faala dev! Conhecemos sim, e utilizamos ela bastante por aqui. Inclusive recomendamos ela para nossos alunos do bootcamp em um módulo sobre ferramentas ! 💜💜🚀
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!
a extensão vscode-styled-components da os highlighting e o intellisense
@@victorpuntel Opa, obrigado pelo toque Victor, legal mesmo :)
Faala dev, Como o Victor disse, é uma extensão diferente para isso. Pesquise por "vscode-styled-components" ! 💜
Esse vídeo ainda vale mesmo para a versão 10 do next.js ?
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
Tem alguma previsão de sair algum codedrop sobre Next com rotas autenticadas?
Fala, Joseph! Ainda não, mas valeu pela sugestão!! 💜💜
Tenho usado o react-query no lugar do SWR, tive que lidar com muitos bugs no SWR