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

【问题标题】：How to pass query parameters to next.js api handler when calling from inside of getStaticProps从 getStaticProps 内部调用时如何将查询参数传递给 next.js api 处理程序
【发布时间】：2021-03-14 21:02:18
【问题描述】：

我的印象是，您可以导入 api 请求处理程序并直接在 getStaticProps 函数内部调用它们，因为文档中说：

注意：您不应该使用 fetch() 在您的应用程序中调用 API 路由。相反，直接导入 API 路由并自己调用它的函数。您可能需要针对这种方法稍微重构您的代码。

我在/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 } }
}

【问题讨论】：

标签： javascript node.js next.js

【解决方案1】：

以下是我建议做的事情以使事情正常进行：

您的 api 调用处理程序不需要文件的“动态”名称（而不是 /api/user/[id].js，您可以创建 /api/user.js）；
您需要为用户详细信息视图指定一个页面（文件）。它应该在/pages/user/[id].js 中创建并在那里粘贴getStaticProps 函数。现在，一旦您将浏览器中的 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 } }
}

如果你需要一些额外的解释，欢迎询问

【讨论】：

我将请求处理程序从 user 重命名为 userHandler，因为我意识到我在示例中重复了两次名称 user。你的似乎是要走的路，但我只是更正你可能打算写await userHandler({ query: params })，因为处理程序需要一个请求对象而不是 id 本身。它回答了这个问题，但我不知道这是否是未来的证明，因为它涉及发送一个虚假的请求对象，而没有很多通常在请求对象中的值。
似乎调用API处理程序的正确方法是使用fetch而不是直接导入处理程序，在这种情况下处理程序的初始文件名是正确的：/pages/api/user/[id].js。现在，当您从 getStaticProps 调用 fetch 时，您应该将 URL 与处理程序的文件夹结构类似：const user = await fetch('/api/user/whatever')。

【解决方案2】：

您不应在服务器内部调用 API 端点。 API 中的 user() 处理程序要求将 Request 和 Response 对象作为参数传递，并且伪造 HTTP 请求/响应没有意义。

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

【讨论】：

我也是这么想的，但我只是想做更多的挖掘工作，以确保没有其他选择，以防万一我有一个包含大量逻辑的 API 处理程序。在这些情况下，我宁愿能够重用处理程序中的逻辑，也不愿在 getStaticProps 中重写它，但我认为不伪造 req 对象是不可行的。