Deploy de um Projeto React com Next.js no Vercel (Via Site)

Realizar o deploy de um projeto é um passo crucial para o desenvolvimento web. Dentre tantas plataformas de hospedagem existentes hoje em dia, a Vercel é uma que se destaca pela facilidade de uso e pela integração perfeita com frameworks como o Next.js. Neste artigo, vamos realizar juntos o deploy diretamente pelo site da Vercel de um projeto React com Next.js, de forma simples e eficaz, para que você também possa aplicar em seus projetos.

Se você ainda não está entendendo nada do que eu estou falando, vamos por partes: que tal revisar o que é o React, o Next.js e a Vercel e por que eles são uma combinação tão poderosa para o desenvolvimento e implantação de aplicações web modernas?

O que é o React?

O React é uma biblioteca JavaScript de código aberto desenvolvida pelo Facebook que permite aos desenvolvedores construir interfaces de usuário interativas e dinâmicas para aplicativos web e móveis. Ele utiliza um modelo de componentes reutilizáveis, onde cada parte da interface é encapsulada em componentes independentes, facilitando o desenvolvimento, manutenção e escalabilidade de aplicativos. Além disso, esta biblioteca utiliza uma abordagem de "renderização virtual" para otimizar o desempenho, atualizando apenas partes específicas da interface quando necessário, resultando em uma experiência de usuário mais responsiva.

O que é o Next.js?

O Next.js é um framework de código aberto construído sobre o React que simplifica o desenvolvimento web. Destaca-se por oferecer renderização no lado do servidor (SSR) para melhor desempenho e SEO, integração fácil com TypeScript, sistema de rotas intuitivo e suporte a diversos plugins, tornando-o uma escolha popular para criar aplicações web modernas e eficientes. Para utilizar o Next.js, você precisa ter o Node.js instalado em seu terminal. Caso esteja usando um sistema operacional Mac ou Windows, você pode acessar o site https://nodejs.org/en/ para fazer o download da versão LTS (Long Term Support) mais recente e estável do Node.js e, em seguida, realizar a instalação usando o arquivo baixado. Caso esteja utilizando o sistema operacional Linux, você pode executar as seguintes linhas de comando no seu terminal para instalar o Node.js:

sudo apt-get update
sudo apt-get install node.js

Se a instalação do Node foi concluída corretamente para qualquer um dos casos citados, ao executarmos o comando abaixo, receberemos como informação no nosso terminal a versão do Node instalada:

node --version

O que é o Vercel?

A Vercel é uma plataforma de hospedagem de aplicativos web que se destaca por sua especialização em aplicativos front-end e oferece uma variedade de recursos e benefícios para desenvolvedores.

A Vercel é amplamente reconhecida por sua eficácia na hospedagem de projetos construídos com frameworks front-end populares, como Next.js e React, mas também é adequada para uma variedade de outros frameworks e tecnologias. Com suporte a domínios personalizados, certificados SSL gratuitos e uma série de ferramentas de colaboração e monitoramento, a Vercel se torna uma escolha preferencial para aqueles que buscam uma plataforma robusta e amigável para hospedar seus projetos web.

Você deve possuir uma conta na Vercel para realizar o deploy por lá. Se não tiver uma, é possível criar uma gratuitamente clicando aqui e se cadastrando.

Primeiros passos

Agora, com a conta na Vercel criada e o Node.js instalado para o uso do Next.js, vamos prosseguir com o passo a passo. Primeiramente, crie um projeto React na sua máquina, por meio do código a seguir:

npx create-next-app pokedex

Responda aos questionamentos que surgirão de acordo com as configurações que você deseja para a sua aplicação e, ao concluir todos os passos, inicialize um terminal no diretório raiz da sua aplicação. Caso tenha dado tudo certo, a seguinte página ficará disponibilizada no endpoint fornecido no terminal:

Após isso, lá no GitHub, iremos criar um repositório que irá armazenar o projeto que temos. Na página inicial do Github, clique no botão “new”. Após isso, preencha os dados necessários (proprietário, nome do repositório e descrição), mantenha o repositório como público e, por fim, clique em “Criar repositório”.

Feitas todas estas configurações no Github, você deve executar, em um terminal inicializado no diretório raiz do seu projeto, os comandos a seguir, com o intuito de realizar o “push” de sua aplicação para o GitHub:

git add .
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com {usuário}/{projeto}.git
git push -u origin main

OBS - Substitua “{usuário}” por seu nome de usuário existente lá no Github. Faça o mesmo para “{projeto}”, inserindo o nome exato que você deu ao projeto no ato de criação.

Uma vez com seu projeto devidamente atualizado e armazenado no Github, podemos ir para o Vercel.

Configurando o Vercel

No painel principal da Vercel (depois de estar devidamente logado), você deve seguir os seguintes passos:

1. Clique no botão “Add New…“. Surgirão diversas opções, mas, você deve escolher a opção Project. Você será direcionado para uma nova página, onde poderá configurar qual das suas contas do Github, caso tenha mais de uma, está localizado o projeto.

2. Abaixo de Import Git Repository, garanta que é o usuário certo que está conectado e, caso não seja, realize a mudança em “Add Github Account”.

OBS - O exemplo que escolhemos fazer utiliza a integração entre o Vercel e o GitHub, mas você também pode utilizar o GitLab ou Bitbucket tranquilamente, sem extremas mudanças.

3. Procure o projeto pelo nome que você deu a ele no ato de criação do mesmo:

4. Após conectar o repositório, a Vercel detecta automaticamente o tipo de projeto. No caso de um projeto Next.js, ele será identificado como um projeto Node.js, como podemos ver na figura 4.

5. Após encontrar o seu repositório, clique em “Import”.

6. Escolha um nome para seu projeto na Vercel. Este nome será usado na URL da aplicação.

7. Configure as opções de implantação, como a branch a ser implantada e o diretório onde o projeto está localizado.

8. Este também é o momento de criar variáveis de ambiente, caso seja necessário. Variáveis de ambiente são valores que são confidenciais demais para estarem soltos dentro do código que nós estamos desenvolvendo. Essas variáveis são usadas para armazenar informações temporárias ou configurações que podem ser acessadas pelo sistema operacional ou por aplicativos em execução. São comumente utilizadas para guardar dados de conexão com a devida segurança, como usuário e senha de um banco de dados, ou a porta que o mesmo funciona, etc. Como elas não vão para repositórios públicos (para não vazar informações confidenciais), precisamos criá-las no Vercel.

OBS - Caso seja necessário criar variáveis de ambiente que funcionam no lado cliente, você pode criá-las com o prefixo “NEXT_PUBLIC_” junto ao nome da variável, além de realizar estas criações dentro de um arquivo env.local, no diretório raiz do projeto.

9. Por fim, e não menos importante, clique em Deploy e aguarde o prazo para que este seja concluído.

A Vercel iniciará o processo de implantação, e você poderá acompanhar o progresso diretamente no painel. Após a conclusão bem-sucedida da implantação, a Vercel fornecerá um URL público onde sua aplicação estará acessível na web. Você pode acessar esse URL para verificar o funcionamento de sua aplicação.

A partir do painel da Vercel, você pode gerenciar seu projeto, configurar domínios personalizados, definir variáveis de ambiente e muito mais.

E, por fim, se você quiser atualizar o seu projeto, basta atualizar a sua versão armazenada no repositório Github que você realizou a integração no Vercel, que automaticamente, depois de alguns minutos, sua versão em deploy também será atualizada!

Considerações finais

Realizar o deploy de um projeto React com Next.js no Vercel diretamente pelo site da plataforma é um processo simplificado e eficaz. A Vercel oferece uma plataforma sólida para hospedar aplicativos front-end, e a integração com o Next.js é suave e intuitiva. Lembre-se de que, ao implantar em um ambiente de produção, é fundamental garantir que seu código esteja otimizado, configurar variáveis de ambiente apropriadas e considerar a escalabilidade de sua aplicação.

Desejamos que aproveitem ao máximo as poderosas ferramentas e recursos oferecidos por essas tecnologias para criar aplicativos web incríveis e compartilhá-los com o mundo, inclusive conosco. Após ler este artigo, você está pronto para implantar seu projeto Next.js na Vercel através do site da plataforma, simplificando o processo e compartilhando suas criações com eficiência.

Pratique, replique e ensine, pois não há forma melhor de fixar um conhecimento adquirido!Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está a fim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn!

Te espero ansiosamente!