Step by step: Multi-Tenant App with Next.js

Iskandar Kurbanov
6 min readApr 3

Next.js now allows you to easily create a multi-tenant application using subdomains. This enables you to create web apps like Linktree,, and other apps where a user gets their own webpage for example.

Before we start, here are some additional resources:

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

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.

Step 4: Setting up routing in…

Iskandar Kurbanov

Software Developer | Programming Instructor and Shopify Consultant