在getStaticProps内部使用路由器
我试图从一个API中获取数据，这个API根据URL的不同而变化，我试图用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在getStaticProps中获取URL中的变量要使用的正确方法是什么？
回答 2
Stack Overflow用户
发布于 2020-06-02 05:17:55
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
}
}注意，在动态路由中使用静态导出需要您需要预先指定所有可能的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中不能调用同一个项目的Next.js API路由，因为它是在构建时执行的(没有服务器正在运行)。您可以直接从数据库中获取数据，而无需调用API。
我建议阅读Next.js数据提取以获得更多的例子和细节。
或者，您可以在客户端获取数据。
Stack Overflow用户
发布于 2021-02-18 22:36:16
我不确定这是否适用于您的情况，但是如果您使用的是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还需要更多的步骤。
https://stackoverflow.com/questions/62143824
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号