NextJS路由适配：带/不带wafrToken的URL路由方案问询

1. 用 Middleware 拦截并重写路由 #

Next.js 的 Middleware 可以在请求到达页面前修改路由，刚好适配这种前缀可选的场景：

• 在项目根目录创建 middleware.ts（或 .js）文件
• 编写匹配规则，识别带56位十六进制wafrToken的URL，重写为不带前缀的业务路由，同时将token传递给页面

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl;
  // 精准匹配56位十六进制前缀 + 业务路由的格式
  const wafrTokenMatch = url.pathname.match(/^\/([0-9a-fA-F]{56})\/(step1|step2|step3|viewer)/);
  
  if (wafrTokenMatch) {
    const [, wafrToken, route] = wafrTokenMatch;
    // 重写路由到业务路径，将token放入查询参数
    const newUrl = new URL(`/${route}`, request.url);
    newUrl.searchParams.set('wafrToken', wafrToken);
    
    return NextResponse.rewrite(newUrl);
  }
  
  // 非匹配路径直接放行
  return NextResponse.next();
}

// 排除静态资源、API等路径，只处理业务路由相关请求
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

2. 页面组件获取wafrToken #

在业务页面（如 app/step1/page.tsx）中，通过searchParams获取token：

export default function Step1Page({ searchParams }: { searchParams: { wafrToken?: string } }) {
  const wafrToken = searchParams.wafrToken;
  
  return (
    <div>
      <h1>Step 1</h1>
      {wafrToken && <p>Wafr Token: {wafrToken}</p>}
    </div>
  );
}

1. 用自定义Express服务器处理路由 #

如果使用Page Router，自定义服务器可以更直观地控制路由匹配：

• 在项目根目录创建 server.js 文件
• 编写路由规则，匹配带token的URL并转发到对应页面

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 匹配带56位十六进制token的业务路由
  server.get(/^\/([0-9a-fA-F]{56})\/(step1|step2|step3|viewer)$/, (req, res) => {
    const wafrToken = req.params[0];
    const route = req.params[1];
    // 将token作为查询参数传递给页面
    const queryParams = { wafrToken };
    app.render(req, res, `/${route}`, queryParams);
  });

  // 其他路由交给Next.js默认处理
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

2. 页面组件获取wafrToken #

在Page Router页面（如 pages/step1.js）中，通过getServerSideProps或useRouter获取token：

import { useRouter } from 'next/router';

export default function Step1() {
  const router = useRouter();
  const wafrToken = router.query.wafrToken;
  
  return (
    <div>
      <h1>Step 1</h1>
      {wafrToken && <p>Wafr Token: {wafrToken}</p>}
    </div>
  );
}

• 正则匹配要严格：确保[0-9a-fA-F]{56}仅匹配56位十六进制字符串，避免误匹配其他路径
• 静态资源排除：Middleware的matcher要排除Next.js内部资源路径，防止影响正常加载
• 测试验证：分别测试带token和不带token的URL，确认路由跳转和token传递正常

内容的提问来源于stack exchange，提问作者Paulo Borralho Martins