Hospedando seu projeto na Vercel
16 de dezembro de 2022Esse post é a parte 3 de 3 de posts ensinando a criar um projeto com Next.js e hospedando ele na Vercel
Fala pessoal! Como vocês estão? Seguindo na saga do desenvolvimento com Next.js, nesse post vou explicar como podemos hospedar o projeto da nossa Pokédex, desenvolvida no dois posts anteriores (você pode acessá-los nos links acimas), lá na Vercel. Bora ver como vamos fazer isso.
O que é a Vercel?
A Vercel é uma plataforma de hospedagem de sites estáticos e aplicações que usam frameworks front-end, como o próprio Next.js, Vite, Nuxt.js, React, Vue, entre vários outros. Você pode ver um pouco melhor no site oficial clicando aqui. Ela também é a criadora do Next.js, e com isso podemos ver a facilidade em hospedar projetos lá. Vamos iniciar o processo de deploy.
Hospedando o nosso projeto
Após finalizarmos o desenvolvimento, vamos subir nosso projeto no GitHub, caso não tenha uma conta, basta criar clicando aqui. Vá em novo repositório e preenchá os campos como no exemplo seguinte e clique em Create repository:
Com o repositório criado, é necessário que você tenha o Git instalado no seu computador (caso você não tenha, é só baixar do site oficial e seguir o passo-a-passo de instalação). Vamos voltar ao nosso projeto, abrir o terminal e executar os seguintes comando:
# adicionar e commitar
git add . && git commit -m "projeto finalizado"
# adicionar a origem do projeto do github.
# obs.: substituir o parametro <username> pelo seu username do github
git remote add origin https://github.com/<username>/pokedex-nextjs.git
# fazer upload dos projetos para o repositorio criado no github
git push origin main
Após isso, devemos ter uma saída parecida com essa:
otaviosilva in pokedex-nextjs on main
❯ git push origin main
Enumerating objects: 34, done.
Counting objects: 100% (34/34), done.
Delta compression using up to 8 threads
Compressing objects: 100% (30/30), done.
Writing objects: 100% (34/34), 68.59 KiB | 2.02 MiB/s, done.
Total 34 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), done.
To github.com:otaviothor/pokedex-nextjs.git
* [new branch] main -> main
Se olharmos no repositório no GitHub, todos os arquivos do nosso projeto vai estar lá. Próximo passo, caso você não tenha, vai ser criar uma conta na Vercel clicando aqui. Você pode criar usando como base sua conta do GitHub. Fazendo isso a Vercel já vai sincronizar com os seus repositórios, facilitando o processo de hospedagem. Depois de criado, você vai ver uma tela parecida com essa:
Agora, basta clicar em Add New..., na opção Project, e verá a seguinte tela:
Perceba, que na parte Import Git Repository, vai ter um projeto com o nome pokedex-nextjs, o mesmo do repositório que criamos lá no GitHub. Para prosseguir clique em Import, e verá a seguinte tela:
Como é um projeto simples e não precisa de nenhuma configuração a mais no nosso, podemos deixar como está, e clicar em Deploy e aguardar um pouco. Você pode acompanhar no bloco abaixo o passo-a-passo desse processo. Com a hospedagem finalizada, vai ver a seguinte tela:
Clicando na parte de preview do nosso projeto, você vai acessar um site com uma url parecida com essa https://pokedex-nextjs-roan.vercel.app/.
Obs.: Caso você faça alguma alteração no projeto, basta adicionar, commitar e pushar as mudanças na branch main, que a própria Vercel observa que houve um novo commit no projeto e fazer todo o processo de deploy automaticamente.
Conclusão
Bom, vimos bastante coisas legais nesses 3 posts, fica o desafio pra vocês incrementarem coisas novas como responsividade do site e até mesmo separar algumas partes em componentes (principalmente os cards dos Pokémons). E claro, não esqueça que esse é um ótimo projeto de portfólio. 🙃
Vou pensar em algo legal para os próximos posts. Você pode mandar sua sugestão no meu email, também compartilhar um pouco do que aprendeu até aqui e se você teve algum problema ou ficou com alguma dúvida de todo esse processo, pode me enviar também. Até mais 👋.