Next.js how to add secure API communication

I am creating a simple form to subscribe to the MailerLite newsletter with React and Next.js. I am using this API: https://github.com/zygos/mailerlite-api-v2-node

I see that it is safe to add the API key to a .env file, as described here.

Here is a sample of the code I have:

import React, { useState, useEffect } from "react";
const MailerLite = require("mailerlite-api-v2-node").default;

const mailerLite = MailerLite("XXXXXXXXXXXXXXXXXX");

  const getTheSubscriberId = (newSubEmail) => {
    mailerLite
      .getSubscribers()
      .then((subList) => {
[..........]
 return (
[..........]
  <form className="newsletter-form" onSubmit={_handleSubmit}>
          <input
            type="email"
            className="form-control"
            placeholder="your mail address"
            name="EMAIL"
            required={true}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

[..........]

I am concerned with Security. I do not want other people to see my API key. The above usage is a bad one. I can't run it on a component, because the API key is visible in the browsers.

Is it possible to still keep using that library, or I need to do something as eplained here?

I wanted to use a server.js, but Netlify, Vercel etc do not accept "never ending processes".

Thus I am looking for other solutions that will help me hide the API key. Please suggest what I can do in this case.

1. Is it possible to run such app without a server?
2. Can I use that library in a way the API will be hidden?
3. If it is possible, can you please help me to understand how I can achieve that?