DEV Community

Cover image for Como realizar o deploy de uma aplicação Next.js com Next Auth na Heroku
renan leonel
renan leonel

Posted on

Como realizar o deploy de uma aplicação Next.js com Next Auth na Heroku

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

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

2) Conectando com o Github

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

image visualization

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

image visualization

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

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
Enter fullscreen mode Exit fullscreen mode

Adicione as variáveis de ambiente na Heroku da seguinte forma:

image visualization

image visualization

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

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)