Next.js 14如何通过动态API路由获取动态Token参数？

一、获取动态token参数 #

在App Router的API路由中，动态路由参数可通过GET函数的第二个参数params直接提取。以你的/api/auth/verify/[token]/route.js文件为例，代码实现如下：

// app/api/auth/verify/[token]/route.js
export async function GET(request, { params }) {
  // 从params中获取动态token
  const { token } = params;
  console.log("当前验证token:", token);
  
  // 这里添加你的用户验证逻辑，比如查询数据库校验token有效性
  const isValidToken = await validateUserToken(token); // 假设这是你的自定义验证函数
  
  if (isValidToken) {
    return new Response(JSON.stringify({ success: true, message: "验证通过" }), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } else {
    return new Response(JSON.stringify({ success: false, message: "无效token" }), {
      status: 400,
      headers: { "Content-Type": "application/json" },
    });
  }
}

二、解决generateStaticParams()缺失错误 #

这个错误是因为你在next.config.js中配置了output: 'export'（静态导出模式），该模式要求所有动态路由必须通过generateStaticParams()预生成所有可能的路径。但你的token是用户注册时动态生成的，无法预生成所有token对应的路径，可根据需求选择以下方案：

方案1：移除静态导出配置 #

如果你的项目不需要静态导出（比如部署到Vercel、Node.js服务器等支持服务端渲染的平台），直接修改next.config.js，删除output: 'export'配置：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 移除 output: 'export' 这一行
  // output: 'export',
};

module.exports = nextConfig;

修改后动态路由可正常运行，无需generateStaticParams()。

方案2：改用查询参数传递token（保留静态导出） #

如果必须使用静态导出，建议将token从动态路由参数改为查询参数，避免静态导出需要预生成路径的限制。调整验证链接格式为mywebsite/api/auth/verify?token=xxx，然后在/api/auth/verify/route.js中通过请求URL的查询参数获取token：

// app/api/auth/verify/route.js
export async function GET(request) {
  // 从查询参数中提取token
  const { searchParams } = new URL(request.url);
  const token = searchParams.get('token');
  console.log("当前验证token:", token);
  
  // 后续验证逻辑与之前一致
  const isValidToken = await validateUserToken(token);
  
  if (isValidToken) {
    return new Response(JSON.stringify({ success: true, message: "验证通过" }), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } else {
    return new Response(JSON.stringify({ success: false, message: "无效token" }), {
      status: 400,
      headers: { "Content-Type": "application/json" },
    });
  }
}

同时，注册时发送的验证链接需改为带查询参数的格式，例如：
${process.env.NEXT_PUBLIC_APP_URL}/api/auth/verify?token=${userToken}

内容的提问来源于stack exchange，提问作者Prayag Bhimani