Next.js 应用中如何为不同域名提供差异化页面路由

通过 Next.js 中间件（Middleware）根据请求的 Host 头动态控制页面可见性，可实现同一应用在多个域名下展示不同路由（如仅在 something.com 显示 /about，而在 somethingelse.com 中隐藏或重定向）。

通过 next.js 中间件（middleware）根据请求的 host 头动态控制页面可见性，可实现同一应用在多个域名下展示不同路由（如仅在 `something.com` 显示 `/about`，而在 `somethingelse.com` 中隐藏或重定向）。

在 Next.js 13+（App Router）中，借助中间件可于请求到达服务端组件前进行轻量级路由拦截与响应干预。该能力特别适用于多域名共用同一代码库的场景——例如主站 something.com 需完整功能（含 /about 页面），而落地页 somethingelse.com 仅需登录、首页等核心能力，需屏蔽非必要路由。

✅ 实现原理：基于 Host 的条件路由控制

中间件运行在边缘（Edge Runtime），可通过 request.headers.get('host') 获取当前请求域名，并结合 request.nextUrl.pathname 判断路径，从而决定是否重定向、返回 404 或修改请求。

以下是一个生产就绪的示例：

// src/middleware.tsimport { NextResponse } from 'next/server';import type { NextRequest } from 'next/server';export function middleware(request: NextRequest) {  const host = request.headers.get('host')?.toLowerCase() || '';  const pathname = request.nextUrl.pathname;  // 定义域名白名单策略  const isMainDomain = host === 'something.com' || host.endsWith('.something.com');  const isLandingDomain = host === 'somethingelse.com' || host.endsWith('.somethingelse.com');  // /about 仅对主域名开放，其他域名重定向至首页  if (pathname.startsWith('/about')) {    if (!isMainDomain) {      return NextResponse.redirect(new URL('/', request.url));    }  }  // 可扩展：/admin 仅限内部域名访问  if (pathname.startsWith('/admin') && !host.includes('internal.')) {    return NextResponse.rewrite(new URL('/404', request.url));  }  // 允许所有其他请求继续  return NextResponse.next();}// 指定中间件生效路径（支持 glob 匹配）export const config = {  matcher: [    '/about/:path*',    '/admin/:path*',    // 注意：若需拦截根路径或动态路由，也应显式列出  ],};

⚠️ 关键注意事项

• matcher 必须显式声明：中间件不会自动匹配所有路径；未列入 matcher 的路径不会触发该中间件逻辑。
• Host 头校验需严谨：避免仅依赖 host === 'somethingelse.com'，建议使用 endsWith() 或正则处理子域名（如 *.something.com），并注意大小写（统一转小写比较）。
• 避免循环重定向：确保重定向目标路径（如 /）本身不在 matcher 列表中，或在逻辑中排除，否则可能触发无限跳转。
• 静态生成（SSG）页面不受影响：中间件仅作用于服务端渲染（SSR）或动态路由请求；纯静态页面（如 app/about/page.tsx 被预渲染为 HTML）仍可通过 CDN 缓存直接返回——因此建议配合 generateStaticParams: false 或 dynamic = 'force-dynamic' 确保路由始终走 SSR。
• NX 单体仓库兼容性：在 NX monorepo 中，确保 middleware.ts 位于 Next.js 应用的 src/ 根目录下（而非 workspace 根目录），且应用构建配置已正确识别中间件入口。

✅ 进阶建议

• 若需更精细权限控制（如基于用户角色 + 域名），可在中间件中调用 auth 服务验证会话后决策；
• 对 SEO 敏感页面（如 /about），建议对非授权域名返回 404（NextResponse.next() + 自定义 notFound()）而非重定向，避免搜索引擎索引错误路径；
• 结合 next.config.js 的 images.domains 和 headers 配置，统一管理跨域资源策略。

通过中间件驱动的域名级路由治理，你无需维护多套代码或部署多个实例，即可安全、灵活地复用核心逻辑（如登录态、API 调用），同时满足不同品牌站点的业务隔离需求。