Dynamic Subdomain Routing With NextJS

Question

How can the Dynamic Sub domain routing feature be implementing in NextJS?

Example: If a user comes with username abc in site xyz then he can access his site on abc.xyz.com

Also, if the user have abc.com domain then he can point abc.com to abc.xyz.com So in future if someone opens abc.com then abc.xyz.com is served. And in URL also the abc.com is shown.

I have investigated few plugin in NPM like vhost and wildcard-subdomains but not sure that is right way to take on this issue.

The vhost requires changes in system hosts in local system and wildcard-subdomain solves the issue purely with routing.

The Local System Setting I have customized Server.js With Code Which Works Temporarily, but does't seems to be a solution which can be used in production :

Server.js

  ...
    if (pathname === "/demo.demo.com") {
          app.render(req, res, "/demo.demo.com", query);
    }
    ...

And in _app.js

static async getInitialProps(appArgument) {
   ...
    return {
      ...
      renderFrom: "demo.demo.com"
    };
  }

Also in my host I have demo.demo.com point to localhost.

The site works for me in demo.demo.com:3000 but how to generalise it in production scenarios with Database and CNAME Records and add/change CNAME Record automatically with User Action.

I dont see how next.js can be related to automatic change or add a CNAME record. — Nico, Jun 26 '20 at 11:55
To perform the above solution, we need to have a host added to local system. The equivalent of host in local System in Internet is CNAME record. — Ank, Jun 26 '20 at 12:00
@Nico: Are you referring that Dynamic Subdomain Routing can not be done with NextJS as I am using NextJS for my application and this is the requirement. The Solution works but how to make it generic with DB and Server Properly. — Ank, Jun 26 '20 at 13:27

score 6 · Answer 1 · answered Oct 19 '20 at 12:56

6

On Vercel (the creators of Next.js), we support Wildcard Domains out of the box. Within Next.js, you then only need to read the Domain from the headers of the incoming request, parse it and then respond with the right content.

I hope that was helpful!

answered Oct 19 '20 at 12:56

Leonard Lamprecht

145
3
7

2

Is there no other way of doing this? I am thing of writing a custom server. – Paschal May 07 '21 at 02:27

score 3 · Answer 2 · answered Jan 26 '22 at 15:04

I just found this blog post https://demo.vercel.pub/platforms-starter-kit, which was published 6 days ago.

It announces https://platformize.co/, a product that does just that.

Multi-tenant applications serve multiple customers across different subdomains/custom domains with a single unified codebase.

For example, this blog is a multi-tenant application:

Subdomain: demo.vercel.pub

Custom domain: platformize.co (maps to demo.vercel.pub)

Build your own: app.vercel.pub

Another example is Hashnode, a popular blogging platform. Each writer has their own unique .hashnode.dev subdomain for their blog:

eda.hashnode.dev

katycodesstuff.hashnode.dev

pit.hashnode.dev

Users can also map custom domains to their .hashnode.dev subdomain:

catalins.tech → pit.hashnode.dev

This is their official recommendation now – amitavk Apr 10 '23 at 07:21 — amitavk, Apr 10 '23 at 07:21

Dynamic Subdomain Routing With NextJS

2 Answers2

Linked