Como realizar o deploy de uma aplicação Next.js com Next Auth na Heroku
Tags: nextjs, heroku, nextauth, deploy
Published: 2023-10-01 17:15:58

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:


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aya96bfhl3exml2xfdiy.png)


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.


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b66q0w5nmiy3uvuhku8i.png)


## 2) Conectando com o Github

Após isso, devemos conectar a conta do Github em que o projeto se encontra.


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjwpi3kjrvywnrdfwwgu.png)


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).


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4gp3zhxosyhgwj3kwrk.png)


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5pwu8d895reaipbe0g7.png)


## 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:


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xglv0rpm4ng0qh8u6ap.png)


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:


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i367p3r8ic473pdvebyo.png)


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48d4q6tdvw5ncisli3ju.png)



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:


![image visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3o5d8kvq5j11bh63x7i.png)

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!