Q57: How do you build a dynamic Multi-Tenant Subdomain Routing engine using Middleware?

Multi-tenant platforms (e.g., tenant1.app.com vs tenant2.app.com) parse host header signatures inside middleware.js. Middleware extracts the subdomain token, checks tenant mapping logic, and executes an internal NextResponse.rewrite() to point requests to custom tenant route folders (app/tenants/[tenant]/...) without altering browser address bars.

Subdomain Rewriting in Middleware

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  const hostname = req.headers.get('host');
  const subdomain = hostname.split('.')[0]; // Extracts 'tenant1'
  
  if (subdomain !== 'www' && subdomain !== 'app') {
    // Transparently rewrite /about to /tenants/tenant1/about
    return NextResponse.rewrite(
      new URL(`/tenants/${subdomain}${req.nextUrl.pathname}`, req.url)
    );
  }
  return NextResponse.next();
}

💡 NextResponse.rewrite routes requests internally to dynamic tenant folders without exposing internal paths in user address bars.

Key Takeaways

Extracts host header signatures inside Edge Middleware.
Rewrites URL paths dynamically to tenant-specific route folders transparently.

Knowledge Check

Why is NextResponse.rewrite() preferred over NextResponse.redirect() for multi-tenant subdomain routing?

Q57: How do you build a dynamic Multi-Tenant Subdomain Routing engine using Middleware?

STAY UPDATED WITH BYTES!