NextJS - getServerSideProps - Error 400 - Bad Request

Question

I'm getting a problem using fetch within the NEXT JS with the getServerSideProps function. As I'm starting with this framework, I'm probably not doing it well. All the credentials to access the external API are correct. It brings me the information when I do the fetch using the same parameters in React, however with Next JS it returns 400 - Bad Request.

I put all the parameters in the same block code below to make it easier to understand. I am using the credentials parms like "" for privacy. They are correct and there is no problem with them.

Note: I believe that I must be using the getServerSideProps function in a wrong way. I don't know if I have to make any configuration on Next JS other than just write the function. In other words, which is shown here is what I have actually written so far. This program is called directly from index.js.

Here is the folder structure:

folder structure

ListOrders is where I render the page. It receives {orders} as props from the getServerSideProps function where I do the fetch.

const ListOrders = ({ orders }) => {
  // Render orders through server side rendering (SSR)
  return (
    <div>
      {/* If orders is an object than map over it to render the page, otherwise orders is an error message */}
      {typeof orders != "string" && orders.length > 0 ? (
        showOrders(orders)
      ) : (
        <h5>{orders}</h5>
      )}
    </div>
  );
};

const showOrders = (orders) => {
  {
    orders.list.map((o, i) => <h3 key={i}>{o.orderId}</h3>);
  }
};

export async function getServerSideProps() {
  // URL PARMS
  const accountName = "<conta>";
  const environment = "<ambiente usado>";
  const filter = "orders";

  // OPTIONS PARMS
  const accept = "application/json";
  const contentType = "application/json; charset=utf-8";

  // SET ACCESS CREDENTIALS
  const appKey = "<chave>";
  const appToken = "<token>";

  // DEFINE URL TO FETCH LIST ORDERS WITH FILTER PARMS
  const url = `https://${accountName}.${environment}.com.br/api/${filter}`;

  // DEFINE OPTIONS ACCORDING TO API

  const options = {
    method: "GET",
    headers: {
      Accept: accept,
      "Content-Type": contentType,
      "API-AppKey": appKey,
      "API-AppToken": appToken,
    },
  };

  // FETCH LIST ORDERS
  const res = await fetch(url, options);

  if (!res.ok) {
    //*! Fetch error: Client (400–499) or Server errors (500–599) (Return error message to the page)
    const qs_str = JSON.stringify(options.qs);
    const headers_str = JSON.stringify(options.headers);

    const statusDescription = setStatusDescription(res.status);

    const orders = `Error: ${res.status} ${statusDescription} ${url} ${options.method} - ${qs_str} - ${headers_str}`;
    return { props: { orders } };
  }

  const data = await res.json();

  if (!data) {
    //*?  Fetch not found (Return 404 to the page)
    return { notFound: true };
  }

  //* Fetch is OK and returning data as expected (Return object orders to the page)
  const orders = JSON.parse(JSON.stringify(data)); 
  return { props: { orders } };
}

Even if I change fetch for axios, I still have the same 400 error. I know this sounds pathetic, but I would like to point that there is nothing wrong with the fetch itself. The problem should be in the way NEXT JS works.

 // FETCH LIST ORDERS

  let orders;

  try {
    const response = await axios.get(url, options);
    //*? Fetch is OK and returning data as expected (Return object orders to the page)
    const ordersList = response.data;
    orders = JSON.parse(JSON.stringify(ordersList)); 
  } catch (error) {
    //*! Fetch error: Client (400–499) or Server errors (500–599) (Return error message to the page)
    const qs_str = JSON.stringify(options.qs);
    const headers_str = JSON.stringify(options.headers);
    orders = `Error 2: ${error} ${url} ${options.method} - ${qs_str} - ${headers_str}`;
  }
  return { props: { orders } };
}