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

Question

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

Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach.

现在我直接从名为 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 路由并自己调用其函数是什么意思？”

Answer 1

我认为 Note 与 内部 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 } };
}

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

How to import API route in NextJS for getStaticProps?

reactjs

fetch-api

next.js