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.
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.
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!
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!
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!
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 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!!
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!
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.
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.
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.
#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)
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
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
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. 💜
@@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.
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
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 :)
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.
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.
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?
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!
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.
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".
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!
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.
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?
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.
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!!!
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
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
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
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 ! 💜💜🚀
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 = () => {
Fala Vitor! Esse tipo de configuração as vezes não é muito recomendada para um template, mas é bem tranquilo para adicionar posteriormente se precisar! 💜
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}; } `} `
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
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!
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...
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
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!
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!! 🚀💜💜
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! 💜💜
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! 💜
Muito obrigado, Diego e Rocketseat. Vale muito a pena acompanhar suas aulas, fazem grande diferença na minha vida profissional!
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, 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 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! 💜💜
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!
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.
Por volta dos 38:35 você utilizou o logo como component. Como fica a questão de acessibilidade? Alt, title, aria, etc.
muito bom.... ta na hr de um review deste video hein...
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! 💜💜
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.
Está na hora de atualizar esse vídeo rs as atualizações do nextjs e suas lib`s ...
Forte abraço!
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!
Ótimo vídeo! Adoro a sua didática, simples e direta. Parabéns!
Falaaa, Thallys! Didática do Diego é incrível, né!? Valeeeu! 💜 😍
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...
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
#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 💜💜
TOOOOOOOP demais !!! Valleeeeuuuu
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?
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! 💜🚀
Porra Diegão, #Onfire kkk porrada de conteúdo.... Fera demais.. ⚛️
É só o começo haahha 💜💜
Muito massa, parabéns! Façam mais conteúdos com NextJS! Hahaha
Fala, Lucas! Valeeu pelo feedback! Faremos sim!! 💜💜
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?
Perfeição, muito obrigado pelo conteúdo.
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! 💜💜
"Eita Geovana, que foi que eu fiz?" kkkkkkk Vai com calma Geovana 🤣🤣🤣🤣🤣
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. 💜
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 th-cam.com/video/h-FsG-QpgfI/w-d-xo.html na hora!
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.
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' ?
Aulas e Cursos 👏🔥
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?
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.
Com a nova atualização com next da doc do react: hoje utilizaria Tailwind ou StyledComponent?
Show de bola, parabéns pelo conteúdo!
Faala, Matheus! Valeeeu pelo feedback! 😍💜
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?
Traz mais videos sobre Next.JS , uma explicação mais aprofundada sobre como funciona, quando usar.
Faala, Guilherme! Valeeu pela sugestão! 💜
Diego, eu fiz exatamente como está no vídeo, mas no momento de desabilitar o javascript, meus estilos somem :(
Boa, gostei do vídeo, como sempre boas dicas.
Faaala, Thiago! Valeeeu! 💜 😍
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!
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.
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".
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!
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
O passo a passo desse video ainda continua sendo o mesmo processo da versão atual do next.js?
Opa, que video maravilhoso!
Uma pergunta: eu preciso estar usando as extensoes de Eslint e Prettier - Code Formatter ??
Um junior na terra de seniors...
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! 💜
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.
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!!!
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
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?
como fariar para separar os tipos que estão dentro da minha pagina? criaria um 'home.d.ts' dentro da pasta pages?
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
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! 💜
Ó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?
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! 💜💜
Em algum lugar o Diego ja mostrou essa configuração do KDE que ele fez?
Esse tutorial funcionou pra alguém em 2021?
O meu ta dando erro no next-images
Obrigado pelo conteúdo!
Fala, Gustavo! Nós quem agradecemos a participação de vocês. Fazemos todos os conteúdos pensando na comunidade!! 💜💜
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
Obrigado pelo vídeo! Abraço de Portugal! 😉
Valeeeu dev! Abraço! 💜💜
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
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
Teoricamente, no prettier, era só colocar o semi como true.
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 ! 💜💜🚀
13:52
"Eita, Giovana"! kkkkk
Alguém sabe me dizer qual modelo do Teclado que ele usa ?
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
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! 😉
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! 💜
*Qual ferramenta vocês utilizam para fazer logos SVG naquele formato novo? Eu uso illustrator 2020 mas gera um svg bagunçado :(*
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 ?
Eu sou do VUE e uso o NuxtJS, acha que eu me adapto facil ao NextJS? Estou aprendendo React!
Tem alguma previsão de sair algum codedrop sobre Next com rotas autenticadas?
Fala, Joseph! Ainda não, mas valeu pela sugestão!! 💜💜
thanks, it actually let me through so i could download it.
Ótimo conteúdo parabéns
Fala, Erik! Muito obrigado pelo feedback! 💜💜
Muito bom o conteúdo
Diego, Como fica a configuração desse projeto usando redux redux-saga e reactotron ?
Fala Vitor! Esse tipo de configuração as vezes não é muito recomendada para um template, mas é bem tranquilo para adicionar posteriormente se precisar! 💜
Tenho usado o react-query no lugar do SWR, tive que lidar com muitos bugs no SWR
Esse vídeo ainda vale mesmo para a versão 10 do next.js ?
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};
}
`}
`
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
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
Thanks... it's working... Good Job...!
Diego
faz um de react native tb
Aquele projetão brabo 2020
Opaa! Valeeu pela sugestão, Pedro! 💜
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!
depois de clonar o repo, é só dar o famoso yarn e yarn dev? Só uma dúvida kkk
Isso mesmo, Wallison! 💜
Roda o *yarn* que ele baixa as dependências!
E depois você manda um *yarn dev* pra startar a aplicação! 😉
topp demaissssss
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...
Gostaria de saber qual o tema de ícone que vc tá usando 😁
Tela
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
E eu lutando faz dois dias com esse eslint e nada kkkkkkkkk
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" ! 💜
Alguém mais ta tendo problema com 'React was used before it was defined'? to apanhando que nem louco pra conseguir resolver isso
Adicione as seguintes linhas nas rules do seu .eslintrc.json
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
boa, era isso mesmo, brigadão
Faz um vídeo sobre React Native Paper