如何在 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 路由并自己调用其函数”是什么意思？

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

相关问题

标签