Struggling to convert "getStaticProps" .jsx to tsx on Nextjs application

Question

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.

Answer 1

It is the way that I found to make it work:

import { InferGetServerSidePropsType } from "next";

type Product = {
  list: object[];
  result: Array<{
    id: number;
    name: string;
    thumbnail_url: string;
  }>;
};

export const getStaticProps = async () => {
  const headers = { Authorization: `Bearer ${process.env.PRINTIFUL_KEY}` };
  const res = await fetch("https://api.printful.com/store/products", {
    headers,
  });
  const products: Product = await res.json();

  return {
    props: {
      products: products.result,
    },
  };
};

export default function TypeTest({
  products,
}: InferGetServerSidePropsType<typeof getStaticProps>) {
  console.log(products);
  return (
    <>
      
    </>
  );
}

I still looking to alternative solutions.