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

Question

我的印象是，您可以导入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);
}

如果我想在前端的另一个页面(如/admin/user/[id].js(的getStaticProps中使用此处理程序，我将如何将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 } }
}

Answer 1

以下是我建议做的事情，以便让东西发挥作用：

1. 你不需要"动态的"；带有api调用处理程序的文件的名称(您可以创建/api/user.js，而不是/api/user/[id].js(
2. 您需要为用户详细信息视图指定一个页面(文件(。它应该在/pages/user/[id].js中创建，并将getStaticProps函数粘贴到那里。现在，一旦您将浏览器中的url更改为http://localhost:3000/user/whatever，就会使用(｛params:｛id:'whatst'｝｝(调用getStaticProps

getStaticProps-获取由多个属性组成的context参数。所有动态URL部分都将存储在params属性下，考虑到以上部分，这应该有效：

export async getStaticProps({ params }){
const user = await user(params.id);
return { props: { user } }
}

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

Answer 2

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

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