Shopify storefront api create cart mutation returns HTML response

I am building an e-commerce with Next.js and Shopify storefront API.
So far I am listing all the products meaning that the connection with the API works fine.

The moment I call the following function to add a product for the first time (meaning that a new cart has to be created) I get an error:

export async function addToCart(itemId: string, quantity: string) {
  const createCartMutation = gql`
    mutation createCart($cartInput: CartInput) {
      cartCreate(input: $cartInput) {
        cart {
          id
        }
      }
    }
  `;

  const variables = {
    cartInput: {
      lines: [
        {
          quantity: parseInt(quantity),
          merchandiseId: itemId,
        },
      ],
    },
  };
  try {
    const d = await graphQLClient.request(createCartMutation, variables);
    return d;
  } catch (error: any) {
    debugger;
    throw new Error(error);
  }
}

ERROR:

the only 2 products have no variants therefore the itemId is the actual product id rather than the variant id.

I can'r figure out what is needed to make this work. Any help would much appreciated. Thank you

UPDATE
If I try the same mutation in the GRaphQl explorer provided by shopify it works correctly

The next config didn't have the variables configured, it worked when pulling products from Shopify even without environment variables configured, I guess it's different when you do mutations. I am not sure, I will find out.

const nextConfig = {
  reactStrictMode: true,
  env: {
    NEXT_SHOPIFY_STORE_DOMAIN: process.env.NEXT_SHOPIFY_STORE_DOMAIN,
    NEXT_SHOPIFY_STOREFRONT_ACCESSTOKEN:
      process.env.NEXT_SHOPIFY_STOREFRONT_ACCESSTOKEN,
  },
};