Learn how to programmatically create unique content pages for your users with a multi-tenant infrastructure using Edge Middleware.
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:
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
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.appDEFAULT_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.
Learn how to programmatically create unique content pages for your users with a multi-tenant infrastructure using Edge Middleware.
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:
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
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.appDEFAULT_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.