How to fetch data from an external api (Heroku) with Next JS?

Question

I'm currently developing a web application with its server and the web application deployed separately. I've deployed my server and the database on Heroku, whilst I used Vercel to deploy my Next JS application.

My problem is when I make a request from Vercel using isomorphic-unfetch, it adds the address of my application in the request (https://myapp.vercel.app/myapp.herokuapp.com/). I only want http://myapp.herokuapp.com to be the request.

This is how I wrote the code for it.

import fetch from 'isomorphic-unfetch'
const host = process.env.API_ENDPOINT -- in this case, it was myapp.herokuapp.com

const myFunction = async(data) => {
  const request = host.concat('/postSomething');
  const res = await fetch(
    request,
    {
      body: JSON.stringify({
        variableA: data.variableA,
        variableB: data.variableB
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    }  
  );
  return await res.json();
}

Answer 1

Apparently, it was just a syntax error in my next.config.js file. I included 'https://' before 'myapp.herokuapp.com' when I declared the API_ENDPOINT, and now it works.