Multi-tenant Subdomain Routing via Middleware

Snippet

Multi-tenant Subdomain Routing via Middleware

Using Next.js Middleware to rewrite URLs based on subdomains allows you to build multi-tenant applications where each customer has their own space, without changing the URL the user sees in their browser.

snippet.js

javascript

import { NextResponse } from 'next/server';
 
export function middleware(req) {
  const hostname = req.headers.get('host');
  const subdomain = hostname.split('.')[0];
  return NextResponse.rewrite(new URL(`/${subdomain}${req.nextUrl.pathname}`, req.url));
}

nextjs

Breakdown

const subdomain = hostname.split('.')[0];

Extracts the first part of the host header to identify the tenant.

NextResponse.rewrite(...)

Map the request internally to a dynamic path while keeping the original URL in the address bar.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Multi-tenant Subdomain Routing via Middleware

Related