It is an application consuming Printifull API that works well on .jsx with the following code:

import axios from "axios";

export default function ApiTest(props) {
  console.log(props);

  return(
    <></>
  (
}

export async function getStaticProps() {
  const headers = { Authorization: `Bearer ${process.env.PRINTIFUL_KEY}` };
  const res = await axios.get("https://api.printful.com/store/products", {
    headers,
  });
  const data = res.data;
  return {
    props: data,
  };
}

It is how the console looks with this script:

When I try to convert to .tsx doesn’t work, the following code shows the way that I am trying to do that.

import { GetStaticProps } from "next";
import axios from "axios";

export default function ProductList(props: any) {
  console.log(props);
  return (
  <></>
)
}

interface Props {
  headers: any;
  res: any;
  data: any;
}

const token = process.env.PRINTIFUL_KEY as string;
const url = "https://api.printful.com/store/products";

export const getStaticProps: GetStaticProps<Props> = async () => {
  const headers = { Authorization: `Bearer ${token}` };
  const res = await axios.get(url, {
    headers,
  });
  const data = res.data;
  return {
    props: data,
  };
};

Now, look at my console. It does not work showing the API content.

I hope to get close to the solution.