Reactjs 当需要来自第三方API的数据时，如何从next.js导出静态HTML页面？

我正在使用next.js来访问

我的一个网页需要来自第三方API的数据，我希望在构建时获取这些数据并将其烘焙到生成的HTML中

我不希望这个电话发生在客户身上，因为：

• CORS无论如何都会阻止请求成功
• 我必须在客户端上公开一个API密钥（不，谢谢）

我认为

getInitialProps

是答案，因为获取的数据确实在构建/导出过程中被烘焙，但是当我离开页面并从页面返回时，

getInitialProps

在客户端被触发，破坏了一切

我当前在getInitialProps中的代码类似于：

static async getInitialProps(){
    // Get Behance posts
    const behanceEndpoint = `https://www.behance.net/v2/users/${process.env.BEHANCE_USERNAME}/projects?api_key=${process.env.BEHANCE_API_KEY}`
    const behanceRes = await fetch(behanceEndpoint)
    let behancePosts = await behanceRes.json()
    // Return only the required number of posts
    return {
        behancePosts: behancePosts
    }
}

---

关于如何处理这个问题，有什么建议或最佳实践吗？我知道这是开箱即用的。

一种可能是，如果您只想在服务器上执行一次，检查getInitialProps中是否存在req参数：（）

req

-HTTP请求对象（仅限服务器）

一种肮脏的做法：

  static async getInitialProps({ req }){
if (req) {
  // only executed on server
  // Get Behance posts
  const behanceEndpoint = `https://www.behance.net/v2/users/${process.env.BEHANCE_USERNAME}/projects?api_key=${process.env.BEHANCE_API_KEY}`
  const behanceRes = await fetch(behanceEndpoint)
  let behancePosts = await behanceRes.json()
  // Return only the required number of posts
  return {
      behancePosts: behancePosts
  }
} else {
  // client context
}

---

希望这有点帮助。

谢谢您的回答。但不幸的是，这对我不起作用。我遇到了此错误

“dr.getInitialProps（）”应解析为对象
，页面显示“发生了意外错误”。当getInitialProps（）从客户端运行时，似乎必须返回一些内容。所以我尝试返回一个默认值（例如{“id”：“}），然后得到一个空白页。