如何在Vercel中将子域名路由到Next.js的指定路由

你不需要拆分monorepo多项目，也不需要将重定向逻辑写入Next.js业务代码，直接使用Vercel原生支持的vercel.json配置即可在边缘节点完成重定向，规则执行不触碰应用业务逻辑，完全满足云配置层面处理的需求。

配置步骤 #

1. 在你的Next.js项目根目录新建vercel.json文件，写入以下重定向规则：

{
  "redirects": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "blog.example.com"
        }
      ],
      "destination": "https://example.com/blog/:path*",
      "permanent": true
    }
  ]
}

2. 将配置文件提交推送到Vercel部署关联的Git分支，等待部署完成即可自动生效。

规则说明 #

• 该规则会匹配所有发往blog.example.com的请求，自动保留原始请求路径：比如访问blog.example.com/post/1会308永久重定向到example.com/blog/post/1，不会丢失路径参数
• 重定向逻辑在Vercel全球边缘节点直接执行，不会转发请求到你的Next.js应用运行时，无额外性能损耗，和业务代码完全解耦
• 你现有的DNS解析配置不需要修改，只需确认Vercel项目后台已经同时绑定主域名example.com和子域名blog.example.com即可

可选调整 #

• 如果不需要保留子域名请求路径，仅需要所有子域名请求统一跳转到博客首页，将规则中source字段值改为/(.*)，destination字段值改为https://example.com/blog即可
• 如果需要临时测试重定向效果，将permanent字段改为false，会返回307临时重定向状态码，不会被浏览器长期缓存

你之前了解到的在Next.js应用内通过中间件、getServerSideProps判断Host头做重定向的方案属于业务层hack，会占用Serverless函数执行资源，优先级低于平台层的vercel.json配置，不推荐使用。

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