Skip to content
Back to Templates

Hostname Rewrites using Edge Middleware

Learn how to programmatically create unique content pages for your users with a multi-tenant infrastructure using Edge Middleware.

DeployView Demo
Hostname Rewrites using Edge Functions

Hostname Rewrites

If you're building a Platforms on Vercel, this example is for you.

In this example, you'll learn how to programmatically create unique content pages for your users with a multi-tenant infrastructure using Edge Middleware. Each user gets assigned a unique subdomain when they create their account, with the (usually paid) option to add a custom domain.

For context, here are some example pages:

All of these generated sites are powered by ISR (no SSR at all) so they load pretty much instantly + the inter-page transitions are lightning fast.

The example above is generated based on the following mock database:

const mockDB = [
    {name: "Site 1", description: "Subdomain + custom domain", subdomain: "subdomain-1", customDomain: "custom-domain-1.com"},
    {name: "Site 2", description: "Subdomain only", subdomain: "subdomain-2", customDomain: null},
    {name: "Site 3", description: "Subdomain only", subdomain: "subdomain-3", customDomain: null},
]

When deploying your own clone of this example, you will need to replace the data fetching methods in getStaticPaths and getStaticProps with your own database of choice (BYOD, Bring-Your-Own-Database).

To give a bit of context of how this can be applied in a real-world context, we recently launched the Platforms Starter Kit – a comprehensive template for site builders, multi-tenant platforms, and low-code tools:

For more info on the Platforms Starter Kit:

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/hostname-rewrites hostname-rewrites

.env has the following defaults:

ROOT_DOMAIN=vercel.app
DEFAULT_DEV_HOST=subdomain-1

Feel free to change ROOT_DOMAIN to your domain if your hostnames are not under .vercel.app. DEFAULT_DEV_HOST is the default hostname for development in localhost.

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

💡 Do note that you will need to replace the ROOT_DOMAIN variable in .env.local with your domain of choice and add that domain as a wildcard domain to your Vercel project.

GitHub Repovercel/examples
Use Cases
Edge Middleware
Stack
Next.jsTailwind

Related Templates

Platforms Starter Kit

Next.js template for building multi-tenant applications with the App Router and Redis.
Platforms Starter Kit

Rewriting at the Edge using Upstash

Learn how to avoid calling several services by pre-checking stock at the edge using a redis cache.
Rewriting at the Edge using Upstash
Hostname Rewrites using Edge Middleware – Vercel