在getStaticProps中使用路由器

时间:2020-06-02 02:26:09

标签: next.js

我正在尝试从随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内部使用的正确方法是什么?

2 个答案:

答案 0 :(得分:1)

getStaticProps是在构建时调用的。您没有路由器,因为没有执行任何请求。

如果动态页面看起来像/pages/[pid].js,则可以访问pid中的context.params.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

答案 1 :(得分:1)

我不确定这是否适用于您的情况,但如果您改用 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 需要更多步骤。