NextJS如何配置通配符路由重定向兼容旧站点遗留路径

要在路径被判定为404前拦截遗留路由，不要在404页做后置跳转，优先使用NextJS原生提供的路由规则能力，两种成熟实现如下，优先选第一种：

方案1：next.config.js 配置原生重定向（推荐） #

NextJS 配置文件中定义的redirects规则优先级高于所有页面路由，匹配到规则后会直接返回3xx重定向响应，完全不会进入页面路由匹配流程，不会出现404，同时不影响/blog这类正常页面的访问。
配置代码如下：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/const-string-:hash',
        destination: 'https://google.com?q=const-string-:hash',
        permanent: true, // 需临时跳转改为false即可，对应返回301/302状态码
        caseSensitive: false, // 等价于原httpd规则的NC标记，匹配时不区分大小写
      },
    ]
  },
}

module.exports = nextConfig

注意：修改next.config.js后必须重启本地开发服务/重新构建部署，配置才会生效，热更新不会重载该文件的规则。

这个配置的匹配逻辑和原httpd的RewriteRule完全对齐：:hash会捕获const-string-后的所有路径内容，自动拼接到目标地址的q参数里，和原规则的$1捕获效果一致。

方案2：Middleware 拦截（适合复杂逻辑场景） #

如果需要在重定向前加额外判断逻辑（比如校验hash合法性、根据请求头做不同跳转），可以用NextJS Middleware实现，拦截时机同样早于页面路由匹配：

// middleware.js 放置在项目根目录（或src目录，和pages/app目录同级）
import { NextResponse } from 'next/server'

export function middleware(request) {
  const { pathname } = request.nextUrl
  // 匹配const-string开头的遗留路径
  if (pathname.startsWith('/const-string-')) {
    const targetUrl = new URL('https://google.com')
    targetUrl.searchParams.set('q', pathname.slice(1)) // 移除路径开头的/，得到完整const-string-xxx
    return NextResponse.redirect(targetUrl, {
      status: 301, // 按需修改为302
    })
  }
  // 非匹配路径直接放行，走正常NextJS路由逻辑
  return NextResponse.next()
}

// 配置匹配范围，避免middleware对所有请求生效拖慢性能
export const config = {
  matcher: '/const-string-:path*',
}

避坑提醒 #

• 不要在自定义404页面里写重定向逻辑，这种方式会先返回404状态码再触发跳转，不符合HTTP状态码规范，也会影响SEO
• 以上两种方案对Pages Router（pages/blog.js属于该模式）、App Router都生效，不需要额外改现有路由代码
• 规则配置完成后，访问/blog会正常走pages/blog.js的页面渲染，访问/const-string-xxx格式路径会直接返回重定向，不会出现404。

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