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();
}