![](/img/trans.png)
[英]Why is a JSON file generated when calling getStaticProps in Next.js?
[英]How to pass query parameters to next.js api handler when calling from inside of getStaticProps
我的印象是您可以导入 api 请求处理程序并直接在您的 getStaticProps function 内部调用它们,因为文档中说:
注意:您不应在应用程序中使用 fetch() 来调用 API 路由。 相反,直接导入 API 路由并自己调用其 function。 您可能需要为这种方法稍微重构您的代码。
我在/api/user/[id].js
有一个 api 路由,实现看起来像这样:
export default function user(req, res) {
const userId = req.query.id;
const user = getUserById(userId);
res.json(user);
}
如果我想在前端的另一个页面的getStaticProps
中使用此处理程序,例如/admin/user/[id].js
我将如何将id
查询传递给请求处理程序? 在没有任何参数的情况下调用它是行不通的,并会抛出一个错误,指出req.query.id
未定义。
import userHandler from "../../api/user/[id].js";
export async getStaticProps(){
// This is where the api handler is getting called
const user = await userHandler();
return { props: { user } }
}
这是我建议做的事情,以使事情正常进行:
/api/user.js
/api/user/[id].js
;/pages/user/[id].js
中创建并在其中粘贴getStaticProps
function。 现在,一旦您将浏览器中的 url 更改为http://localhost:3000/user/whatever
getStaticProps
将被调用 ({ params: {id: 'whatever'}}) getStaticProps
- 获取包含多个属性的context
参数。 所有动态 URL 部分都将存储在params
属性下,考虑到以上部分这应该有效:
export async getStaticProps({ params }){
const user = await user(params.id);
return { props: { user } }
}
如果您需要一些额外的解释,欢迎询问
您不应在服务器内部调用 API 端点。 API 中的user()
处理程序要求Request
和Response
对象作为 arguments 传递,伪造 HTTP 请求/响应没有意义。
相反, export
function 您的 API 用于获取用户数据: getUserById(userId)
。 然后, import
并在getStaticProps()
中调用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.