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

Posted 2023-03-30

【中文标题】如何在 NextJS 中为 getStaticProps 导入 API 路由？

【英文标题】：How to import API route in NextJS for getStaticProps?

【发布时间】：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路由并自己调用其函数”是什么意思？

【参考方案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  ;