Hostname Rewrites

Hostname Rewrites is a Next.js Edge Middleware example from Vercel's public examples repository that maps incoming request hostnames — user subdomains and custom domains — to generated, ISR-powered content pages in a multi-tenant setup.

What is Hostname Rewrites using Edge Middleware?

Hostname Rewrites is a reference implementation in Vercel's examples repository that shows how to programmatically generate unique content pages for each user of a multi-tenant platform. It reads the incoming request hostname in Edge Middleware and rewrites it to the page belonging to that host, so that a subdomain such as subdomain-1.vercel.sh and a custom domain such as custom-domain-1.com can serve the same site. Every generated page is statically produced with ISR — there is no SSR — so pages load quickly and inter-page transitions are fast.

What makes Hostname Rewrites stand out?

• Hostname rewriting in Edge Middleware — middleware inspects the request host, distinguishes subdomains from custom domains, and rewrites to the matching tenant page.
• Subdomains and custom domains together — one tenant can be reachable at both a subdomain and a mapped custom domain, as shown by custom-domain-1.com pointing at subdomain-1.vercel.sh.
• ISR-only rendering — every generated site is statically rendered and revalidated; the README states there is no SSR at all.
• Bring-your-own-database data layer — a small in-repo mock database stands in for a real one, and you replace the data fetching inside getStaticPaths and getStaticProps with your own source.
• Environment-driven root domain — ROOT_DOMAIN (default vercel.app) and DEFAULT_DEV_HOST (default subdomain-1) live in the .env file; DEFAULT_DEV_HOST is the hostname used during localhost development.
• Next.js with Tailwind CSS — the example is built on Next.js and styled with Tailwind.
• Two install paths — one-click deploy to Vercel, or bootstrapping locally with pnpm create next-app --example.

Who is it for?

• Teams building platforms on Vercel — developers who need to give each account its own subdomain, with the option of a custom domain later.
• Site builders and low-code products — teams already generating a page per customer who need hostname routing to serve those pages.
• Next.js developers learning Edge Middleware — anyone who wants a runnable reference for hostname rewrites instead of documentation alone.

What can you do with Hostname Rewrites?

• Multi-tenant platform routing: assign every new account a subdomain and rewrite incoming hosts to that tenant's generated page.
• Custom domain mapping: let users point their own domain at the same content their subdomain already serves, following the custom-domain-1.com to subdomain-1.vercel.sh pattern.
• Static hosting of user sites: generate tenant pages with ISR so they stay static and revalidate rather than server-render per request.
• Prototype a site builder: swap the mock database for your own and use the routing layer as a base for a publishing product; Vercel's Platforms Starter Kit extends the idea with an editing backend.

How does it work?

Edge Middleware reads the hostname of each request, matches it against the tenant records, and rewrites the request internally to the corresponding static page. Those pages are generated ahead of time by Next.js data-fetching functions, with the mock database replaced by your own. Locally you run pnpm dev; in production you set ROOT_DOMAIN and add that domain as a wildcard domain on your Vercel project.

Alternatives

• Platforms Starter Kit — Vercel's fuller multi-tenant template for site builders, low-code tools, and multi-tenant platforms, which adds an editing backend alongside the published sites.
• edge-rewrites-upstash — a related Vercel example listed alongside this one that pairs edge rewrites with Upstash.

FAQ

Do I need my own database?

Yes. The repository ships with a mock database of three example sites, and the README instructs you to replace the data-fetching methods in getStaticPaths and getStaticProps with your own database — the template's term for this is bring your own database.

Does it use server-side rendering?

No. The README states that all generated sites are powered by ISR with no SSR at all, which is why pages load quickly and inter-page transitions are fast. Content is revalidated rather than rendered on each request.

How do I use a custom root domain?

Change ROOT_DOMAIN in your environment file from the default vercel.app to your own domain, then add that domain as a wildcard domain to your Vercel project. DEFAULT_DEV_HOST controls which hostname is used when developing on localhost.

Is Hostname Rewrites free?

The template is published as open-source code in Vercel's examples repository on GitHub, so you can clone it or bootstrap it with pnpm create next-app --example. Running it requires a Vercel project for deployment.

What framework does it use?

It is built with Next.js and styled with Tailwind CSS, and its routing logic runs in Next.js Edge Middleware. The README frames it specifically for people building platforms on Vercel.