hostname-rewrites

Hostname Rewrites Example

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:

• subdomain-1.vercel.sh (subdomain)
• subdomain-2.vercel.sh (subdomain)
• subdomain-3.vercel.sh (subdomain)
• custom-domain-1.com (custom domain, maps to subdomain-1.vercel.sh)

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, here's a starter kit that we're currently working on – it's basically a Substack clone with subdomains + custom domains functionality:

• steven.platformize.co
• vercel.platformize.co
• retreat.platformize.co
• stey.me (custom domain)
• vercel.pub (custom domain)
• retreat.vercel.pub (custom subdomain)

We will be releasing this starter kit very soon, so stay tuned!

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

Download this repository via git:

git clone https://github.com/vercel-customer-feedback/edge-functions.git

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example edge-middleware/examples/hostname-rewrites hostname-rewrites
# or
yarn create next-app --example edge-middleware/examples/hostname-rewrites hostname-rewrites

Deploy it to the cloud with Vercel (Documentation).

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