繁体   English   中英

从 getStaticProps 内部调用时如何将查询参数传递给 next.js api 处理程序

[英]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 } }
}

这是我建议做的事情,以使事情正常进行:

  1. 您的 api 调用处理程序不需要文件的“动态”名称(您可以创建/api/user.js /api/user/[id].js
  2. 您需要为用户详细信息视图指定一个页面(文件)。 它应该在/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()处理程序要求RequestResponse对象作为 arguments 传递,伪造 HTTP 请求/响应没有意义。

相反, export function 您的 API 用于获取用户数据: getUserById(userId) 然后, import并在getStaticProps()中调用它。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM