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

【问题标题】：How to import API route in NextJS for getStaticProps?如何在 NextJS 中为 getStaticProps 导入 API 路由？
【发布时间】：2021-01-10 10:11:07
【问题描述】：

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

注意：你不应该使用 fetch() 来调用你的 API 路由应用。而是直接导入 API 路由并调用它的发挥自己的作用。您可能需要稍微重构您的代码这种方法。

现在我直接从名为Index 的页面组件调用getStaticProps，如下所示：

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

【问题讨论】：

标签： reactjs next.js fetch-api

【解决方案1】：

我认为注意与internal api path

有关

您不应使用 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 } };
}

【讨论】：