如何在Next.js中为每位注册用户分配独立二级域名

1. 前置域名与托管配置 #

• 给主域名添加*泛解析记录，指向你的Next.js应用服务的节点IP，比如主域为example.com时，新增一条A记录，主机记录填*，值填写服务IP，TTL保持默认即可
• 国内服务器部署需提前完成泛域名的备案流程
• 若使用Vercel/Netlify等托管平台，需在自定义域名设置中添加*.example.com作为可绑定域名，同时开启泛域名支持

2. Next.js 核心逻辑实现 #

首先通过中间件拦截所有请求，解析二级域名提取用户名，重写到对应的用户资料路由，地址栏保持二级域名样式，用户无感知。

2.1 编写中间件逻辑 #

在项目根目录创建middleware.ts文件：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// 保留二级域名列表，避免和系统功能冲突，用户注册时也要校验禁止使用这些名称
const RESERVED_HOSTNAMES = new Set(['www', 'api', 'admin', 'app', 'mail'])

export function middleware(request: NextRequest) {
  const host = request.headers.get('host') || ''
  // 去掉端口号适配本地开发场景
  const [hostname] = host.split(':')
  const domainParts = hostname.split('.')

  // 判断是否为用户二级域名，普通后缀域名拆分后长度为3，多级后缀需调整对应长度
  if (domainParts.length === 3 && !RESERVED_HOSTNAMES.has(domainParts[0])) {
    const username = domainParts[0]
    // 内部重写到用户资料路由，不改变地址栏显示
    return NextResponse.rewrite(new URL(`/user/${username}`, request.url))
  }

  return NextResponse.next()
}

// 配置中间件匹配所有请求
export const config = {
  matcher: '/:path*',
}

2.2 用户资料页实现 #

App Router 模式

在app目录下创建app/user/[username]/page.tsx：

// app/user/[username]/page.tsx
async function UserProfilePage({ params }: { params: { username: string } }) {
  // 调用内部接口/数据库查询对应用户名的资料
  const userData = await fetch(`/api/getUserInfo?username=${params.username}`).then(res => res.json())
  
  if (!userData) {
    return <div>该用户不存在</div>
  }

  return (
    <div>
      <h1>{userData.nickname}的个人主页</h1>
      {/* 其余用户资料渲染逻辑 */}
    </div>
  )
}

export default UserProfilePage

Pages Router 模式

在pages目录下创建pages/user/[username].tsx：

// pages/user/[username].tsx
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

export default function UserProfilePage() {
  const router = useRouter()
  const { username } = router.query
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    if (!username) return
    fetch(`/api/getUserInfo?username=${username}`)
      .then(res => res.json())
      .then(data => setUserData(data))
  }, [username])

  if (!userData) return <div>加载中...</div>

  return (
    <div>
      <h1>{userData.nickname}的个人主页</h1>
      {/* 其余用户资料渲染逻辑 */}
    </div>
  )
}

3. 本地开发调试方法 #

修改本地hosts文件，添加测试映射规则，比如要测试john.example.com，就新增一行127.0.0.1 john.example.com，启动Next.js服务后直接访问john.example.com:3000即可验证效果。

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