Pular para o conteúdo

Nextjs Pro – Boilerplate completo para iniciar seus projetos

Fala galera! Neste vídeo falo sobre o boilerplate que criei e utilizo em todos os meus projetos com Next.js.

Aqui novamente e irmão eu faço bastante o projetos pessoais para mim mesmo ou lá na empresa drenagem precisa iniciar um novo projeto do zero e muita das vezes na maioria das vezes na verdade a gente faz muito tempo configurando todas as ferramentas de desenvolvimento que a gente vai usar né tipo essa cliente preferir antes e testes unitários e por aí vai então o que

É um valor plate e estou compartilhando aqui com vocês porque eu espero que também ajude assim encontrar a idade de vocês também esse valor peixe é o que eu fiz pelos projetos pessoais mesmo na empresa claro a gente tem um power plate um pouco mais adiantado ali porque a jantar no sentido que eu falo de a gente já tem coisas dos apps do padrão direto que a gente faz

Lá dentro e não faria sentido colocar aqui porque não vez podendo ir aí porque eu faço presente para mim eu vou fazer presente no meu blog eu usei isso vai leite quando eu vou fazer algum projeto pessoal que vai estar disposto na web eu uso esse valor presente que tava valeu plate valeu date os bonecos né são configurado ali com tá discutir também tá o acidente

Ocorrer o digestil vários outros vou computador aqui ficou mais fácil você beleza bom esse aqui é o repositório o link vai tá na descrição do vídeo se tiver alguma maneira aqui nesse repositório eu já deixei tudo configurado o que dá um leque tiver configurado o contato split já tudo com furadinho aí conforme o próprio net prega e eu recomendo usar mestre

E com certeza e-taxfree também com certeza para tratar melhorando aí um pouco a segurança do teu código s gente configurado também no padrão para usualmente não falo nunca mais vezes no mercado então talvez já não conhecida como você usa mas é bem fácil ir lá na é seguinte config e dar uma alterada também tá cumprir aqui já formatando tudo bonitinho eu

Já configurado juntamente com esse 20 história de componentes também que toda vez que a gente vai configurar os três componentes neste essa dá um se você tem que perder ali praticamente uma hora porque ele vai dar problema você ter que configurar o storybook também mesmo casos forma com net ds às vezes dá um trabalho de configurar principalmente o stories como

Styled-components já procurei várias vezes e às vezes perde até horas para fazer os dois conversarem o husky também o husky um pré-convite é uma ferramenta de hora que você vai comentar o que o código ele rouba os testes ele verifica se tá mudando faz muita coisa para depois aceitar seu convite isso facilita muito na hora gente já pegar algum problema antes

Subir ele para o ar para poder beijo não pro ar online mas antes subir na cor de vez e também ajuda bastante você tem uma camada de segurança mais ali né o jet também já está configurado aqui com o backtest na árvore e configurado com história de componentes e todo o restante porque às vezes o teste é complicadinho de usar ele quantidade de componentes em fazer

Vários configurações para eles conversarem certinho aqui já está tudo configurado aí a mão ou pelo menos esse valor plate aquele economiza domínio mais umas quatro horas de configuração e de fazer uma série que eu já você já comi e já começar a desenvolver na diferente de um desafio pra gente acaba que perde muito tempo configurando as ferramentas e a gente

Vai usar as vezes até um tanto considerável que você poderia estar desenvolvendo e vamos ver aqui foi desenvolver um valor presente que você já coloniale de um de kit ocorre já começa a desenvolver de fato você não precisa ficar e não precisa ficar horas configurando as coisas por exemplo não valer plate eu peguei dois gestão configurar ele do zero de acordo

Com experiências passadas né se eu tivesse confirmado a primeira vez de moradia bem mais foi nada nada de 4 a 5 horas para configurar suas bonitinho desse jeito então querendo não é um tempo aí que você poderia ter investido no projeto em vez de tá configurando aí uma coisa da problema com a outra e aqui eu já baixei a cabeça já resolve todos os problemas que

Todas essas vídeos aqui daria uma entre si já tá tá bonitinho para rodar até com ele aqui ele já tá só dar o rpm lá no deve vai dar o ambiente de desenvolvimento não é o next em desenvolvimento também já vou rodar aqui o npm run on a starbucks para rodar o starbucks tá configurado belezinha ou deve também ou o né que está configurado já tá aqui também

Com os principais comandos que a gente vai precisar o deve para rodar em deve o beauty para tá rodando o build do nexo de fato o start para rodar o servidor servidor oficial mesmo o servidor em modo de produção o link e que é para rodar o é silente em todo o código o teste velocidade do entrar o teste dos pontos lote para rodar em modo lote identificar conforme se

Vai desenvolvendo o teste já vai rodando enfim coisinhas assim o generation a verdade também tá com top configurado aí deixa eu esqueci de mencionar aqui mas ela comprove configurado para tá gerando quando você quer gerar um novo componente você só precisa digitar ou rpm range generation ele já vai executar o top gerando bom starbucks tá bem básico claro é só

Um valor pedir para você estar lá do projeto mas ele se prestar botou dando ali também já deve ter começar a rodar o projeto né você já pode vir aqui e ver o projeto rodando só tá isso mesmo por enquanto tá bem tá bem bem simples já dá para mão enfim já tá o meu cliente aí no código em si ele tá com a divisão costumo usar os por gerson que eu divido

Aqui beijos para fazer os loteamentos temos aqui para as questões de css e uai e o aí onde eu vou as coisas que são de interface de usuário que os componentes as páginas a diferença desse peixe para espelhos é porque o next usa países para rotear né então esse peixes que fica na primeira do primeiro nível do céu esse aqui é somente para o nexo usar para rotear

Para ver por exemplo a índia é home então só para eles executar home mas na verdade arruma está aqui o componente da vão estar aqui porém no next aqui também quando você quer fazer o site rindo a gente faz trazer as o cérebro é aqui que tem que acontecer é onde o next tem o consegue rodar o céu está dinheiro então isso rolaria uma daria como próprios para

Home aqui enfim qualquer dúvida manda aí mano embaixo vai ser um prazer estar respondendo qualquer coisa eu também a gente grava mais vídeos eu pretendo gravar alguns vídeos fazendo com o newell’s quando alguma uai entendeu se você tiver alguma sugestão deixa aqui embaixo de qual eo aí você gostaria de ver sendo tô nada e é isso eu cresci bauer peixe para jantar

Bastante do meu lado nos projetos pessoais até quando vai a gente vai usar esse bolinho frente e eu vou evoluindo ele com o tempo conforme você universal nova conforme for saindo coisas novas e importantes eu vou colocando nele questão de teste também eu não mostrei mais por exemplo já tá até com os exemplos dos testes de como você vê já tem dois testes apenas

10 12 concorrentes apenas em ser aconteceu componente mas dá para entender só um bolinho de leite para você ter a base para criar o projeto ali porque quando você dá o peixe next step ele e ele traz o next mais estágio netcine.us 20 sem o thriller sem as configurações do notebook sem as configurações de teste sem em nada então aquela que você vai acabar perdendo

Bastante olhinhos aí configurado ok já tá bom aqui eu fui até o exemplo gente como como colocar os testes nap.se enfim tá tudo aí e e bom espero que tenha te ajudado aí qualquer dúvida também possa embaixo qualquer sugestão enfim espero que esse bairro que ele te ajude no dia a dia nos seus projetos e economiza um tempo para você também assim vamos economizando

Para mim pode se você gostou do vídeo dá um like no youtube ver que é um vídeo relevante ou se você arrumou outro lugar o desague deixa aí no comentário seu feedback negativo ou feedback positivo espero que te ajude e qualquer dúvida deixa aqui embaixo também deixa sugestões de vídeos dos próximos vídeos também se quiser deixar sugestões de como iguais estou

Fazendo clonar e o age enfim de sites ou de apps aí você manda aí para as sugestões que o pessoal e mandando eu vou fazendo e eu preciso usar o leite para isso também já você tá bastante e é isso beleza espero ter ajudado abraço até mais é

Transcrito do video
Next.js Pro – Boilerplate completo para iniciar seus projetos By Wilson Neto