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

解决方法

我认为 Note 与内部api路径

有关

您不应使用fetch（）在您的应用程序

中调用API路由

我想与您在/pages/api/*中定义的每个路径有关。代替fetch，您只需重构代码并导入数据即可。

所以，下面的代码是正确的，不需要任何重构

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