如何让Vercel部署的NextJS 13应用同代码库适配主域名与子域名？

完全可以实现这个需求，核心是通过Vercel的路由重写规则结合域名配置完成，不需要改动现有代码结构，用同一部署包就能实现不同路由组对应不同域名。

步骤1：配置vercel.json路由规则 #

在项目根目录创建或修改vercel.json，添加以下路由映射规则：

{
  "routes": [
    // 将app子域名的所有请求转发到(dashboard)路由组
    {
      "src": "/(.*)",
      "dest": "/(dashboard)/$1",
      "domain": "app.mydomain.com"
    },
    // 主域名下的signin/register路径转发到(auth)路由组
    {
      "src": "/signin(.*)",
      "dest": "/(auth)/signin$1",
      "domain": "mydomain.com"
    },
    {
      "src": "/register(.*)",
      "dest": "/(auth)/register$1",
      "domain": "mydomain.com"
    },
    // 主域名根路径指向(home)路由组的page.tsx
    {
      "src": "/",
      "dest": "/(home)/page",
      "domain": "mydomain.com"
    },
    // 主域名其他未匹配的路径直接沿用原路由逻辑
    {
      "src": "/(.*)",
      "dest": "/$1",
      "domain": "mydomain.com"
    }
  ]
}

步骤2：在Vercel后台配置域名 #

1. 打开你的Vercel项目，进入「Settings」→「Domains」页面
2. 添加主域名mydomain.com和子域名app.mydomain.com
3. 按照Vercel指引完成DNS解析配置（可选择Vercel托管DNS，或手动添加CNAME记录指向cname.vercel-dns.com）

关键注意事项 #

• 路由组的括号()是Next.js的语法，在vercel.json中要直接引用文件系统里的路由组名称，不要去掉括号
• 测试时先通过Vercel预览部署验证路由规则，确认生效后再推到生产环境
• 后续新增路由或路由组时，记得同步更新vercel.json规则，避免路由冲突

这种方案完全基于Vercel平台能力，无需拆分代码或多部署，完美匹配你用同一部署包和代码库的需求。

内容的提问来源于stack exchange，提问作者Alonso Ureña