如何在Next.js中创建带查询字符串的支付回调动态路由？

问题根源 #

你创建的builder/live/[slug].tsx是动态路由段，用于匹配builder/live/xxx这类路径里的xxx变量部分，但你的目标URL是builder/live/thankyou?trxref=xxx——其中thankyou是固定路径，trxref是查询参数而非路由参数，所以当前路由文件无法匹配这个固定路径，导致404错误。

正确实现步骤 #

1. 创建固定路由页面
   在pages目录下创建对应固定路径的文件：pages/builder/live/thankyou.tsx，这样就能直接匹配http://localhost:3000/builder/live/thankyou这个基础路径。

2. 获取查询参数trxref
   根据你使用的Next.js版本，选择对应方式获取参数：

   • Next.js 12及以下（Pages Router）：

     import { useRouter } from 'next/router';
     
     export default function ThankYouPage() {
       const router = useRouter();
       const { trxref } = router.query;
     
       return (
         <div>
           <h1>支付成功</h1>
           {trxref && <p>交易参考号：{trxref}</p>}
         </div>
       );
     }
     

   • Next.js 13+（App Router）：

     // app/builder/live/thankyou/page.tsx
     export default function ThankYouPage({ searchParams }: { searchParams: { trxref?: string } }) {
       const trxref = searchParams.trxref;
     
       return (
         <div>
           <h1>支付成功</h1>
           {trxref && <p>交易参考号：{trxref}</p>}
         </div>
       );
     }
     

3. 验证路由可用性
   启动项目后，访问http://localhost:3000/builder/live/thankyou?trxref=test123，页面应正常加载并显示交易参考号。

额外注意事项 #

• 若后续需要支持多个类似回调路径，可保留[slug].tsx，此时builder/live/thankyou会匹配该文件（slug值为thankyou），仍可通过router.query.trxref获取参数，但当前固定回调场景更推荐使用固定路由文件。
• 生产环境配置支付网关时，需确保回调地址使用https协议，且域名、路径与项目部署地址完全一致。

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