Como publicar um site react usando github, vercel, react.js e next.js
Antes de mais nada
Adicione next.js ao seu projeto.
Esse processo não é exatamente necessário, a vercel consegue hospedar projetos que não contenham versel, porém next.js foi feito pela empresa vercel e traz diversas vantagens que serão abordadas ao final do post.
Quero deixar claro que esse post está considerando um fluxo de trabalho com as tecnologias react.js e versel no desenvolvimento do site. Caso utilize outras tecnologias não garanto a mesma experiência apresentada.
para iniciar seu projeto de forma correta siga o tutorial clicando aqui
1 - publicando o código no github
O primeiro passo para publicar um site (fazer um deploy) nesse sistema é ter seu código no github (não se esqueça de gerar a build do seu código).
para isso você pode acompanhar um artigo sobre esse tema clicando aqui
2 -Crie uma conta na vercel
Vercel é o site que vai cuidar da hospedagem da sua aplicação, também é a desenvolvedora do next.js e é viciada em performance final do site para o usuário, algo que eu valorizo muito.
Crie uma conta na vercel clicando aqui
3 - importe seu repositório
Agora, logue na sua conta vercel e importe seu repositório, para isso pode ser usado GitHub / GitLab / BitBucket. Sendo o github uma preferência pessoal do seu humilde redator.
o sistema da vercel é bem intuitivo nesse aspecto, mas caso tenha dificuldades pode tirar suas dúvidas clicando aqui
4 - Pronto... mas nem tanto
Parabéns, você tem um site online, mas antes de ir gostaria de falar de algumas vantagens de se usar esse sistema para dar deploy em seus sites daqui pra frente sempre que possível
Otimização do CEO: por causa do jeito que o next.js funciona ela permite que seu código em javascript seja interpretado do lado de servidor e o que o usuário final vê e o que é indexado e interpretado pelo navegador é html. Ótimo para CEO
É muito bom dar um commit e push no seu código e já consegui ver uma preview online da versão final.
É incrivelmente fácil e sem complicação. Seu sistema é automatizante robusto e escalável. Parece mágica!