如何在两个不同域名下部署Next.js应用并实现页面权限控制

一、基于域名控制页面显示/隐藏 #

1. 组件内直接判断域名 #

在需要控制的页面组件（如/app/about/page.tsx）中，通过headers()获取当前请求的域名，根据域名决定是否渲染内容：

import { headers } from 'next/headers';

export default function AboutPage() {
  const host = headers().get('host');
  
  // 在somethingelse.com域名下不渲染页面，可返回404组件或空内容
  if (host === 'somethingelse.com') {
    return <div>页面不存在</div>; // 也可导入自定义404组件
  }

  return (
    <div>
      <h1>About Us</h1>
      {/* 页面核心内容 */}
    </div>
  );
}

2. 用Middleware路由拦截（更高效） #

通过Next.js的Middleware在路由层面拦截请求，避免不必要的组件加载。创建项目根目录下的middleware.ts：

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

export function middleware(request: NextRequest) {
  const host = request.headers.get('host');
  const targetPath = '/about';

  // 当在somethingelse.com访问/about时，重定向到首页或返回404
  if (host === 'somethingelse.com' && request.nextUrl.pathname === targetPath) {
    // 重定向到首页
    return NextResponse.redirect(new URL('/', request.url));
    // 或直接返回404状态：return new NextResponse(null, { status: 404 });
  }

  return NextResponse.next();
}

// 指定仅对/about路径生效
export const config = {
  matcher: ['/about'],
};

二、NX单体仓下创建着陆页并复用主应用功能 #

利用NX的单体仓特性，将共享功能抽成独立库，在主应用和新着陆页应用中复用：

1. 抽离共享功能到NX库 #

将登录组件、业务逻辑、API封装成共享库，比如创建shared-auth库：

nx g @nx/next:lib shared-auth

把主应用中登录相关的组件（如LoginForm）、hooks（如useAuth）、API请求逻辑移到这个库中。

2. 创建独立着陆页应用 #

在NX中新建一个Next.js应用作为着陆页：

nx g @nx/next:app landing-page

3. 在着陆页中复用共享库 #

在着陆页的组件中直接导入共享库的功能：

// landing-page/app/login/page.tsx
import { LoginForm } from '@your-workspace/shared-auth';

export default function LandingLoginPage() {
  return (
    <div className="landing-login">
      <h1>欢迎登录</h1>
      <LoginForm />
    </div>
  );
}

4. 跨域状态共享（可选） #

如果需要在主应用和着陆页之间共享登录状态：

• 使用Cookie：设置Cookie的domain为父域名（如.your-domain.com），确保跨子域名能访问
• 对于完全独立的域名，可通过JWT配合后端验证，前端将token存在localStorage，跨域请求时携带token并配置后端CORS允许目标域名

5. 部署配置 #

NX中每个应用可独立部署：

• 主应用部署到something.com和somethingelse.com
• 着陆页应用部署到目标域名
• 共享库会被自动编译并打包到各个应用中，无需单独部署

内容的提问来源于stack exchange，提问作者Towhid.kahn