如何在 NextJS 中为 getStaticProps 导入 API 路由?

我正在使用 NextJS 的 getStaticProps 从外部 API 获取一些数据。阅读 getStaticProps 上的数据获取文档时,我遇到了这个特殊的注释:

注意:您不应该使用 fetch() 来调用应用程序中的 API 路由。而是直接导入 API 路由并自己调用它的函数。您可能需要针对这种方法稍微重构您的代码。

现在我直接从一个名为 getStaticProps 的页面组件调用 Index ,如下所示:

export default function Index({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const response = await fetch("http://127.0.0.1:8000/data");
  const data = await response.json();
  return { props: { data } };
}

根据上述文档,不应该这样做。如何重构我的代码以正确获取数据? “导入 API 路由并自己调用其函数”是什么意思?

stack overflow How to import API route in NextJS for getStaticProps?
原文答案