Este é um breve tutorial de como realizar o deploy no serviço cloud Heroku de uma aplicação Next.js utilizando Next Auth como método de autenticação de usuários. A versão do Next.js utilizada é a versão 13.5.1, versão mais recente até a data de publicação do artigo.
1) Primeiros passos
Primeiramente, devemos ter um projeto Next.js publicado no Github, assim como uma conta na Heroku. Ao entrar na sua conta, você irá se deparar com a opção de criar um novo aplicativo:
Insira o nome do seu projeto e a região em que seu aplicativo será hospedado. No meu caso optei por hospedar nos Estados Unidos, mas selecione a opção que melhor se encaixa nos seus requisitos.
2) Conectando com o Github
Após isso, devemos conectar a conta do Github em que o projeto se encontra.
Após conectar com o Github, selecione o repositório que deseja fazer o deploy e selecione o botão Connect. Nesta parte também é possível habilitar o deploy automático toda vez que houver alterações na branch principal (main).
3) Definir Variáveis de Ambiente
Agora, vamos para a parte mais importante deste tutorial, a definição das variáveis de ambiente. Vá nas configurações do projeto:
Na seção “Config Vars”, pressione o botão “Reveal Config Vars”.
No projeto Next.js, estou usando como exemplo as variáveis de ambiente do Next Auth da seguinte forma:
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=123
Adicione as variáveis de ambiente na Heroku da seguinte forma:
A variável de ambiente NEXTAUTH_URL apontando para o localhost será apenas provisória enquanto não realizamos o primeiro deploy. Após o deploy, será necessário alterar o valor para o link gerado pela Heroku.
Em seguida, salve as variáveis de ambiente e realize seu primeiro deploy manual:
Este processo pode demorar um pouco, então aguarde o deploy ser realizado. Ao finalizar, clique no botão “View” para ser redirecionado para a URL do seu projeto. Parabéns, você realizou seu primeiro deploy de um projeto Next.js na Heroku! Porém, para que a autenticação funcione corretamente, devemos alterar o valor da variável de ambiente que apontava para o localhost, apontando-a agora para a sua URL da Heroku.
4) Atualizar a Variável de Ambiente para a URL da Heroku
Copie a URL do seu projeto, vá para “Settings”, na seção “Config Vars” pressione o botão “Reveal Config Vars”. Altere a variável NEXTAUTH_URL com a URL do seu projeto Heroku. Por fim, realize outro deploy manual, e seu projeto deve funcionar corretamente.
Considerações Finais
Parabéns, você realizou seu deploy com Next Auth! Caso tenha habilitado os deploys automáticos, qualquer alteração na branch main do seu projeto realizará o deploy automático para produção, portanto tenha cuidado! Caso esteja utilizando outros serviços e/ou bibliotecas que necessitem de variáveis de ambiente, não se esqueça de adicioná-las no projeto na Heroku, caso contrário as integrações podem não funcionar como esperado.
Obrigado por ler até aqui!
Top comments (0)