在 getStaticProps 中使用路由器答案

【问题标题】：Using router inside getStaticProps在 getStaticProps 中使用路由器
【发布时间】：2020-09-20 10:31:50
【问题描述】：

我正在尝试从因 URL 而异的 API 获取数据，并尝试使用 withRouter 进行此操作，但它似乎无法在 getStaticProps 中工作。

我目前有以下代码：

export async function getStaticProps({ router }) {
const pageRequest = `http://localhost:3000/api/posts/${router.query.pid}`
const res = await fetch(pageRequest)
const json = await res.json()
return {
    props: {
        json,
    },
}
}

它回来了：

TypeError: Cannot read property 'query' of undefined

获取 URL 中的变量以在 getStaticProps 中使用的正确方法是什么？

【问题讨论】：

标签： next.js

【解决方案1】：

getStaticProps在构建时调用。您没有路由器，因为没有执行请求。

如果动态页面看起来像/pages/[pid].js，您可以在context.params.pid 中访问pid。

export async function getStaticProps(context) {
  const pid = context.params.pid
  return {
    props: {}, // will be passed to the page component as props
  }
}

请注意，将静态导出与动态路由一起使用需要getStaticPaths。您需要预先指定所有可能的 ID，以便 Next.js 知道要生成哪些页面。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { pid: '1' } },
      { params: { pid: '2' } }
    ],
    fallback: true or false // See the "fallback" section below
  };
}

另外，您不能在 getStaticProps 中调用您自己的 API，因为它是在构建时执行的（没有服务器正在运行）。您可以直接从数据库中获取数据，无需 API 调用。

我建议阅读Next.js Data fetching 了解更多示例和详细信息。

或者，您可以改为在客户端获取数据。

Fetching data on the client side

getStaticProps

【讨论】：

问题是我需要它是静态的，我如何从 mysql 中获取并将它与 getStaticProps 一起使用？有任何想法吗？谢谢！
> 此外，您不能在 getStaticProps 中调用自己的 API，因为它是在构建时执行的（没有服务器正在运行）。您可以直接从数据库中获取数据，而无需调用 API。那部分实际上是不正确的。您可以在getStaticProps 中调用具有 fetch 或类似功能的 API，然后将响应（无论是否经过进一步处理）作为道具返回到页面。导出异步函数 getStaticProps(context) { const response = await GraphQLRequest(); // 或另一个异步获取 return { props: response //来自 API } }
@i-know-nothing，你不能调用你自己的同一个项目的Next.js API。在构建期间没有服务器在运行。
啊，明白了，你的意思是像在 Next.js 中定义的 API 路由。误会是我的错。

【解决方案2】：

我不确定这是否适合您的情况，但如果您使用 can getServerSideProps 代替，您可以使用以下内容获取查询 ID：

export async function getServerSideProps({ query }) {
  const pageRequest = `http://localhost:3000/api/posts/${query.pid}`
  const res = await fetch(pageRequest)
  const json = await res.json()

  return {
    props: {
        json,
    },
  }
}

我知道使用 getStaticProps 或 getServerSideProps 有不同的注意事项，但正如 Nikolai 在他的回答中所描述的，在这种情况下使用 getStaticProps 需要更多的步骤。

【讨论】：