How I Built a Multi Subdomain System in One Next.js App

By Neel Vora

This post walks through how I built a Multi Subdomain System in One Next.js App, and where it fits in the rest of my work.

The multi-tenant patterns here evolved from managing complex government sites where different departments needed isolated content with shared infrastructure.

I wanted my portfolio to behave like a real multi site environment without needing separate deployments. My goal was to run everything under a single Next.js app and still feel like each subdomain was its own product.

The subdomains include:

• ai.neelvora.com
• blog.neelvora.com
• music.neelvora.com
• woodworking.neelvora.com
• shop.neelvora.com

Requirements

• Each subdomain needed its own navigation
• Each needed its own branding and identity
• Certain components should appear or disappear depending on the site
• Admin sections should apply globally
• No duplicate code

Middleware

Next.js middleware inspects incoming requests and sets a header based on the host.

I use:

• x-site-key header to identify which subdomain is active
• A SiteProvider in the React tree to load site specific config

Site config

Each site has a typed config object:

• Name
• Logo label
• Navigation items
• Color accents
• Whether to show the AI chat widget
• Whether to show the tech stack pill

Component behavior

Components read from useSite() and can adapt:

• Navigation swaps per site
• Hero behavior changes
• Shop hides AI lab banners
• AI chat repositions for the shop

Why this matters

This architecture:

• Demonstrates multi tenant thinking
• Cuts down repetition
• Keeps deployments simple
• Proves I can design scalable frontend systems

Keep exploring

From here you can:

• See more details on the Colophon page.
• Visit /neel-vora for more background about me and my work.
• Browse more posts on the blog.