Next.js SSG模式下如何处理未知动态token的路由路径？

针对你需要在纯静态生成（SSG）模式下处理/recovery-password/[token]这类动态token路由的场景，以下是两个可行的实现方案：

方案一：客户端URL参数解析 + 托管服务重写 #

1. 创建静态页面文件pages/recovery-password.js（无需使用动态路由格式）
2. 在页面中通过客户端JavaScript提取URL中的token参数：

   import { useRouter } from 'next/router';
   
   export default function RecoveryPassword() {
     const router = useRouter();
     // 从URL路径中提取token
     const token = router.asPath.split('/').pop();
   
     return (
       <div>
         {token ? (
           <div>
             <h3>重置密码</h3>
             <p>当前验证Token：{token}</p>
             {/* 此处添加密码重置表单、客户端API调用逻辑 */}
             <input type="password" placeholder="输入新密码" />
             <button>确认重置</button>
           </div>
         ) : (
           <div>无效的密码重置链接</div>
         )}
       </div>
     );
   }
   

3. 配置静态托管服务的重写规则，将所有/recovery-password/*请求转发到生成的静态页面：
   • Vercel：在vercel.json中添加

     {
       "rewrites": [
         { "source": "/recovery-password/:token", "destination": "/recovery-password" }
       ]
     }
     

   • Netlify：在netlify.toml中添加

     [[redirects]]
       from = "/recovery-password/*"
       to = "/recovery-password.html"
       status = 200
     

   • 其他托管服务：参照官方文档配置URL重写规则，匹配/recovery-password/xxx格式的请求并转发到对应静态页面。

方案二：Catch-All路由兼容纯静态导出 #

1. 创建Catch-All路由文件pages/recovery-password/[...token].js
2. 在页面中客户端侧解析token参数：

   import { useRouter } from 'next/router';
   
   export default function RecoveryPassword() {
     const router = useRouter();
     const { token } = router.query;
     // Catch-All路由返回的参数为数组，取最后一项作为实际token
     const actualToken = Array.isArray(token) ? token[0] : token;
   
     return (
       <div>
         {actualToken ? (
           <form>
             {/* 密码重置表单逻辑 */}
             <input type="password" placeholder="新密码" required />
             <input type="password" placeholder="确认新密码" required />
             <button type="submit">完成重置</button>
           </form>
         ) : (
           <div>请通过有效的密码重置链接访问</div>
         )}
       </div>
     );
   }
   
   // 纯静态导出时需配置getStaticPaths返回空数组
   export async function getStaticPaths() {
     return {
       paths: [],
       fallback: false,
     };
   }
   

3. 配置托管服务重写规则，将/recovery-password/*请求转发到/recovery-password/[...token].html文件。

核心逻辑说明 #

两个方案的核心都是将动态token的处理完全放在客户端：

• 静态构建阶段只生成一个通用的密码重置页面
• 通过托管服务的重写规则，让所有带动态token的请求都加载这个静态页面
• 在客户端页面中提取token后，调用后端API完成token验证、密码重置等业务逻辑

这种方式既保持了应用的纯静态生成模式，又能支持任意动态token的访问需求。

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