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

Question

我正在使用 NextJS 的 getStaticProps从外部 API 获取一些数据。阅读 getStaticProps 上的数据获取文档我遇到了这个特别的笔记:

Note: You should not use fetch() to call an API route in yourapplication. Instead, directly import the API route and call itsfunction yourself. You may need to slightly refactor your code forthis approach.

现在我打电话 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路由，自己调用它的函数”是什么意思？

Answer 1

我认为该注释与 有关内部api路径

You should not use fetch() to call an API route in your application

我想与您在 /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 } };
}