Next.js/React多域名映射：子路由绑定独立域名方案咨询

1. DNS配置 #

• 为每个用户域名（john.com、joseph.com、stephany.com）添加CNAME记录，指向主域名domain.com；裸域名（不带www）可使用ALIAS记录指向主域名，或直接解析到主域名的服务器IP。
• 完成所有用户域名的平台验证（如部署平台要求的TXT记录配置）。

2. Next.js中间件实现路由映射 #

通过Next.js中间件（Middleware）实现域名到用户路由的自动重写，无需修改现有路由结构。

创建middleware.ts文件（项目根目录） #

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

// 域名与用户前缀的映射表
const domainToUser = new Map([
  ['john.com', 'john'],
  ['joseph.com', 'joseph'],
  ['stephany.com', 'stephany'],
  // 可选：添加带www前缀的域名映射
  ['www.john.com', 'john'],
]);

export function middleware(request: NextRequest) {
  const host = request.headers.get('host')?.replace(/:\d+$/, ''); // 移除端口号
  if (!host) return NextResponse.next();

  const userPrefix = domainToUser.get(host);
  if (userPrefix) {
    // 重写请求路径：john.com/all_users → /john/all_users
    const newPath = `/${userPrefix}${request.nextUrl.pathname}`;
    const newUrl = new URL(newPath, request.nextUrl.origin);
    return NextResponse.rewrite(newUrl);
  }

  return NextResponse.next();
}

// 匹配所有路径生效
export const config = {
  matcher: ['/:path*'],
};

3. 部署平台配置（以Vercel为例） #

• 进入项目「Settings → Domains」，添加所有用户域名，Vercel会自动生成并配置SSL证书。
• 确保根目录的middleware.ts被正确部署，Vercel会自动加载该文件生效。

4. 自定义Nginx服务器配置 #

若使用Nginx反向代理Next.js服务，添加以下域名映射规则：

# John的域名配置
server {
  listen 80;
  server_name john.com www.john.com;

  location / {
    proxy_pass http://domain.com/john$request_uri;
    proxy_set_header Host domain.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

# Joseph的域名配置
server {
  listen 80;
  server_name joseph.com www.joseph.com;

  location / {
    proxy_pass http://domain.com/joseph$request_uri;
    proxy_set_header Host domain.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

# Stephany的域名配置
server {
  listen 80;
  server_name stephany.com www.stephany.com;

  location / {
    proxy_pass http://domain.com/stephany$request_uri;
    proxy_set_header Host domain.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

之后配置SSL证书（如Let's Encrypt），确保HTTPS访问正常。

注意事项 #

• 确保所有用户域名的SSL证书有效，避免浏览器安全警告。
• 根据实际需求在映射表中补充带www或其他子域名的规则。
• 静态资源会随路由重写自动匹配，无需额外配置。

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