Multi-Domain Architecture: Separating Landing and Control

The Challenge

We needed to serve two distinct experiences: a public marketing site at boottify.com and an authenticated application at control.boottify.com. The question was: two codebases or one?

Our Decision: Single Codebase, Multiple Domains

We chose to maintain a single Next.js application that intelligently routes based on the incoming domain. This approach offers several advantages:

• Shared Components - UI components, utilities, and types are shared across both experiences
• Single Deployment - One build process, one deployment pipeline
• Consistent Design System - Both sites use the same design tokens and components

Implementation

The routing logic lives in our proxy configuration (Next.js 16 migrated middleware to proxy.ts):

// src/proxy.ts
export function proxy(request: NextRequest) {
  const hostname = request.headers.get('host');

  if (hostname?.includes('control.')) {
    // Handle authenticated routes
    return handleControlCenter(request);
  }

  // Public marketing site
  return NextResponse.next();
}

Results

This architecture has served us well, reducing maintenance overhead while providing a seamless experience across both domains.