+-----------------------------------------------------------------------------------------+
|                  Next.js 15 Multi-Tenant Edge Routing Architecture                      |
+-----------------------------------------------------------------------------------------+

[User Visits: acme.yourplatform.com OR custom-domain.com]
                            |
                            v
+-----------------------------------------------------------------+
| Cloudflare for SaaS Edge (SSL / TLS Termination & WAF)          |
| - Custom SSL Cert verified via CNAME                            |
| - Forwards original 'Host' header to Next.js Origin             |
+-----------------------------------------------------------------+
                            |
                            v
+-----------------------------------------------------------------+
| Next.js 15 Edge Middleware (middleware.ts)                      |
| 1. Extract hostname: 'acme.yourplatform.com'                    |
| 2. Redis Edge Lookup: Hostname -> Tenant ID 'tenant_9842' (<2ms)|
| 3. Internal URL Rewrite: /sites/tenant_9842/[...path]           |
+-----------------------------------------------------------------+
                            |
                            v
+-----------------------------------------------------------------+
| App Router Dynamic Route Folder: app/sites/[site]/page.tsx      |
| - Renders isolated tenant branding, theme tokens & database rows|
+-----------------------------------------------------------------+

Type: CNAME
Name: *
Target: cname.yourplatform.com
TTL: Auto / Proxied

// services/cloudflareDomains.ts
export async function registerTenantCustomDomain(customHostname: string) {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${process.env.CLOUDFLARE_ZONE_ID}/custom_hostnames`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        hostname: customHostname,
        ssl: { method: "http", type: "dv" },
      }),
    }
  );

  const data = await response.json();
  return data.result; // Returns CNAME and TXT verification records to show the tenant!
}

// middleware.ts
import { NextResponse, type NextRequest } from "next/server";
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

export const config = {
  matcher: [
    /*
     * Match all paths except static files, favicon, images, and API routes
     */
    "/((?!api/|_next/static|_next/image|favicon.ico).*)",
  ],
};

export async function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const hostname = req.headers.get("host")?.toLowerCase() || "";

  // 1. Define Primary Platform Domains
  const appDomain = process.env.NEXT_PUBLIC_ROOT_DOMAIN || "yourplatform.com";
  const isRootDomain = hostname === appDomain || hostname === `www.${appDomain}`;

  // 2. If visiting the marketing home page, serve standard app/page.tsx
  if (isRootDomain) {
    return NextResponse.next();
  }

  // 3. Resolve Tenant Subdomain or Custom Domain via Edge Redis (<2ms)
  let tenantSlug: string | null = null;

  if (hostname.endsWith(`.${appDomain}`)) {
    // Wildcard Subdomain: 'acme.yourplatform.com' -> 'acme'
    tenantSlug = hostname.replace(`.${appDomain}`, "");
  } else {
    // Custom Vanity Domain: 'portal.customer.com' -> Lookup in Redis
    tenantSlug = await redis.get<string>(`custom_domain:${hostname}`);
  }

  if (!tenantSlug) {
    // Hostname not registered in platform
    return NextResponse.rewrite(new URL("/404-tenant-not-found", req.url));
  }

  // 4. Rewrite URL Internally to Multi-Tenant Route Directory
  // Rewrites https://acme.yourplatform.com/about -> /sites/acme/about
  return NextResponse.rewrite(
    new URL(`/sites/`{tenantSlug}`{url.pathname}${url.search}`, req.url)
  );
}

app/
├── (marketing)/             # Primary Marketing Site (yourplatform.com)
│   ├── page.tsx
│   └── pricing/page.tsx
├── (app)/                   # SaaS Admin App (app.yourplatform.com)
│   ├── dashboard/page.tsx
│   └── settings/domains/page.tsx
├── sites/                   # DYNAMIC MULTI-TENANT SITES
│   └── [site]/              # Matched via Middleware Rewrite!
│       ├── layout.tsx       # Tenant-Specific Theme & Layout
│       ├── page.tsx         # Tenant Homepage (acme.yourplatform.com)
│       └── blog/
│           └── [slug]/page.tsx
└── middleware.ts            # The Edge Traffic Controller

// app/sites/[site]/page.tsx
import { notFound } from "next/navigation";
import db from "@/lib/db";
import { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ site: string }>;
}): Promise<Metadata> {
  const { site } = await params;
  const tenant = await db.getTenantBySlug(site);
  if (!tenant) return {};

  return {
    title: `${tenant.name} — Official Portal`,
    description: tenant.description,
  };
}

export default async function TenantHomePage({
  params,
}: {
  params: Promise<{ site: string }>;
}) {
  const { site } = await params;
  const tenant = await db.getTenantWithProducts(site);

  if (!tenant) notFound();

  return (
    <div style={{ "--primary-color": tenant.brandColor } as React.CSSProperties}>
      <header className="p-6 border-b">
        <h1 className="text-3xl font-bold">{tenant.name}</h1>
      </header>
      <main className="max-w-6xl mx-auto py-12 px-4">
        <p className="text-lg text-neutral-400">{tenant.tagline}</p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
          {tenant.products.map((p: any) => (
            <div key={p.id} className="p-4 border rounded-xl">
              <h3>{p.title}</h3>
              <p>${p.price}</p>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

127.0.0.1 custom-domain.test
127.0.0.1 client-portal.test