0PricingLogin
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Per-Tenant Theming and Feature Flags

Load tenant-specific branding and gated features at request time without redeploys.

What Is Per-Tenant Theming?

In a multi-tenant SaaS application, every customer (tenant) often expects the product to feel like their own. Per-tenant theming means loading a different color palette, logo, typography, or layout at request time — without shipping a new build.

  • White-labeling: the tenant's brand replaces yours entirely.
  • Accent overrides: a shared UI with per-tenant primary colors and fonts.
  • Feature flags: certain UI elements or API routes are enabled only for specific tenants based on their plan or configuration.

Next.js 15 App Router is ideal for this because every request passes through Server Components and middleware, giving you a natural hook to resolve tenant context before anything renders.

Resolving the Tenant at the Edge

The first step is identifying which tenant is making the request. The two most common strategies are:

  • Subdomain routing: acme.app.com → tenant slug = acme
  • Custom domain mapping: dashboard.acme.com → look up tenant by host header

Next.js 15 middleware runs at the edge before any Server Component, making it the right place to resolve the tenant and forward that context downstream via request headers.

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  const host = req.headers.get('host') ?? '';
  // Extract subdomain: "acme.app.com" -> "acme"
  const subdomain = host.split('.')[0];
  const tenantSlug = subdomain !== 'www' && subdomain !== 'app' ? subdomain : 'default';

  const res = NextResponse.next();
  // Forward tenant slug to Server Components via a custom header
  res.headers.set('x-tenant-slug', tenantSlug);
  return res;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

All lessons in this course

  1. Subdomain and Path-Based Tenant Resolution
  2. Row-Level Tenant Data Isolation Patterns
  3. Per-Tenant Theming and Feature Flags
  4. Usage Metering and Subscription Enforcement
← Back to Next.js 15 Fullstack (App Router + Server Actions)