在 Nextjs 应用程序上努力将 "getStaticProps" .jsx 转换为 tsx

Question

这是一个使用 Printifull API 的应用程序，它在 .jsx 上运行良好，代码如下：


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,
  };
}

这是控制台使用此脚本的样子：

当我尝试转换为 .tsx 不起作用时，以下代码显示了我尝试执行此操作的方式。


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,
  };
};

现在，看看我的控制台。它无法显示 API 内容。

我希望接近解决方案。

Answer 1

这是我发现的工作方式：

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 (
    <>
      
    </>
  );
}

我仍在寻找替代解决方案。

在 Nextjs 应用程序上努力将 "getStaticProps" .jsx 转换为 tsx

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

javascript

typescript

reactjs

next.js

react-typescript