Step by step: Multi-Tenant App with Next.js
--
Next.js now allows you to easily create a multi-tenant application using subdomains. This enables you to create web apps like Linktree, Super.so, and other apps where a user gets their own webpage for example.
Before we start, here are some additional resources:
- Platforms Starter Kit Tutorial
- Platforms Starter Kit Demo
- Example of a webpage builder
- Hostname rewrites example
Step 1: Create a blank Next.js app
npx create-next-app
You will be asked if you want Typescript, ESLint and other options. Hit yes for everything.
Once the app is created, open it in your code editor (VSCode).
Step 2: Deploy app to Vercel
You can do inside VSCode by opening the terminal (Command + J on Mac).
Install the Vercel CLI:npm i -g vercel
Once that is done, go ahead and run:vercel --prod to deploy it to production
Click on the deployment link to end up in the Vercel dashboard.
Step 3: Setup your domain
In order to use the subdomain feature in Vercel, you will need to setup your own wildcard domain. If you are a developer, you should have plenty of unused domains ;)
Mine is called buildwithnext.com
I am using Namecheap so here is how you do it:
In the Vercel dashboard add your wildcard domain
Then log into your Namecheap account and add the following Nameserver DNS urls
When you add a wildcard domain, Vercel will automatically populate all the other ones for you.
