Next.js Discord

Discord Forum

Is there a way to have multiple pages each with their own custom domain all in one project?

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I am building some basic static pages for local companies and I don't want to spin up a new NextJS project every time especially because they're all going to use the same template, just like with different information, ie header, hero photo, etc.

I've seen the Vercel platforms starter kit but I don't exactly get how it works with custom domains, how is it routing the domain to its appropriate page? Will that routing affect SEO?
Answered by joulev
Multi tenant apps like the platforms starter kit basically works like this:

1. You deploy the exact same app to all subdomains. Now when you visit hello.domain.com, you get the same content as domain.com

2. You make subpaths that are the intended content for the subdomains. For example, you render the intended content of hello.domain.com in a page at /sites/hello, world.domain.com at /sites/world and so on.

3. You use the middleware, get the Origin header and see the subdomain of the incoming request. If the request goes to hello.domain.com for example, you then rewrite the request to /sites/hello
View full answer

14 Replies

@Sun bear I am building some basic static pages for local companies and I don't want to spin up a new NextJS project every time especially because they're all going to use the same template, just like with different information, ie header, hero photo, etc. I've seen the Vercel platforms starter kit but I don't exactly get how it works with custom domains, how is it routing the domain to its appropriate page? Will that routing affect SEO?
joulev
Multi tenant apps like the platforms starter kit basically works like this:

1. You deploy the exact same app to all subdomains. Now when you visit hello.domain.com, you get the same content as domain.com

2. You make subpaths that are the intended content for the subdomains. For example, you render the intended content of hello.domain.com in a page at /sites/hello, world.domain.com at /sites/world and so on.

3. You use the middleware, get the Origin header and see the subdomain of the incoming request. If the request goes to hello.domain.com for example, you then rewrite the request to /sites/hello
Answer
@joulev The platforms starter kit uses the vercel domains api which is a proprietary tech and depends on the hosting provider, if you host outside you need a different method. The relevant vercel-specific code can be found here https://github.com/vercel/platforms/blob/main/lib/domains.ts
Sun bearOP
I see so does this only work if the domains themselves are registered with Vercel as well? Because if it's registered at Namecheap or elsewhere, I'm not sure how Vercel would be able to change those settings to point the domain to the Vercel hosted app
@joulev No, users simply need to add the necessary DNS records to point their domain to the vercel servers. Domains registered anywhere still work
Sun bearOP
I see, so what does adding a domain to a Vercel project actually do then, if the user still needs to change their DNS settings?
@Sun bear I see, so what does adding a domain to a Vercel project actually do then, if the user still needs to change their DNS settings?
joulev
It tells the vercel server to forward the request to what project and deployment. The same thing happens for your own domains as for your users’ domains
@joulev Multi tenant apps like the platforms starter kit basically works like this: 1. You deploy the exact same app to all subdomains. Now when you visit hello.domain.com, you get the same content as domain.com 2. You make subpaths that are the intended content for the subdomains. For example, you render the intended content of hello.domain.com in a page at /sites/hello, world.domain.com at /sites/world and so on. 3. You use the middleware, get the Origin header and see the subdomain of the incoming request. If the request goes to hello.domain.com for example, you then rewrite the request to /sites/hello
Northeast Congo Lion
Hi, I like to achieve something similar, but like to use rewrite instead of the middleware.

blog.acme.dev should rewrite to acme.dev/blog.

I followed the guide on https://vercel.com/guides/can-i-redirect-from-a-subdomain-to-a-subpath, but having an issue with the top path.
blog.acme.dev returns 404
acme.dev/blog returns the blog
blog.acme.dev/test returns test site
acme.dev/blog/test returns test site too

async rewrites() {
    return [
      {
        source: "/:path*",
        has: [
          {
            type: "host",
            value: "blog.acme.dev",
          },
        ],
        destination: "/blog/:path*",
      },
    ];


Do you have an idea why the top level path results in a 404?
I even tried this:

async rewrites() {
    return [
      {
        source: "/",
        has: [
          {
            type: "host",
            value: "blog.acme.dev",
          },
        ],
        destination: "/blog",
      },
      {
        source: "/:path*",
        has: [
          {
            type: "host",
            value: "blog.acme.dev",
          },
        ],
        destination: "/blog/:path*",
      },
    ];
Multitenancy rewrites are pretty complex logic and it’s gonna be insanely hard if not impossible to do it in the rewrites option of next.config.js
You need to consider a lot of things. You don’t want to rewrite static file paths and static asset (/_next) paths for example
@joulev * blog.acme.dev * Rewritten to blog.acme.dev/blog * Rewritten to blog.acme.dev/blog/blog I think you can tell where this is going
Northeast Congo Lion
I see, thx for the explanation!
My issue with the middleware solution is the high number of edge middleware invocations.
Do you have any recommendation?