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
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.