Add custom domain to dynamic subdomain in nextjs app deployed in vercel that already has custom domain

Question

I have deployed a Next.js app in Vercel that renders a subdomain based content and I have already linked my domain to that project.

Project Deploy URL: *.mysite.com

Here, If John opens john.mysite.com, it will render content for John's profile. Same for Mary, mary.mysite.com renders Mary's content.

Now, I want to let John and Mary connect custom domain pointing their subdomain on my app, like www.john.com will display John's content on my website, same for Mary.

This is my DNS configuration on CLoudflare.

The subdomains are splitted into 3 parts and each part has their own Next.js project pointing to that subdomain.

1. root domain and www for landing page.
2. app subdomain for admin page, where users can create their subdomain based content.
3. remaining all subdomains are matched by user generated subdomain's content.

I want to know how do do this. Just like adding custom domain to blogspot blog, imagine john.mysite.com is default blogspot url and www.john.com is custom domain.

Edit after answer:

john.com is using CLoudflare nameservers and this is the current DNS configuration for john.com. I too tried all vercel ip shown above to test if any works and this is my current one.

| Type  | Name       | Content            |
|-------|------------|--------------------|
| A     | john.com   | 76.76.21.21        |
| CNAME | www        | john.mysite.com    |
| CNAME | *          | my-app.vercel.app  |

This is giving me this result for both john.com and www.john.com but john.mysite.com is correctly giving me John's profile.

Also, the deployment URL provided by vercel cannot be used to load user's profile, like the deployment URL my-app.vercel.app tries to render profile for user with id my-site, so only custom domain like john.mysite.com can be used to load user profiles.

Edit 2:

I added following dns records to john.com and result is same.

| NS    | mysite.com | ns1.vercel-dns.com |
| NS    | mysite.com | ns2.vercel-dns.com |

Answer 1

You have a Next.js app deployed on Vercel that serves different content based on the subdomain (e.g., john.mysite.com and mary.mysite.com).
You want to map external custom domains (e.g., www.john.com and www.mary.com) to these subdomains.

                               ┌────────────────┐
                        ┌──────┤  Vercel Cloud  ├────────┐
                        │      └────────────────┘        │
                        │                                │
                        │                                │
              ┌───────────────────┐             ┌───────────────────┐
              │     *.mysite.com  │             │    Vercel DNS     │
              └───────────────────┘             └───────────────────┘
                │              │                    │             │
┌───────────────┴───┐ ┌────────┴─────────┐ ┌────────┴───────┐ ┌───┴──────────────┐
│ john.mysite.com   │ │ mary.mysite.com  │ │ ns1.vercel.com │ │ ns2.vercel.com   │
└───────────────────┘ └──────────────────┘ └────────────────┘ └──────────────────┘
         │                     │                    │                   │
         │                     │                    │                   │
┌────────┴───────┐     ┌───────┴────────┐  ┌────────┴───────┐   ┌───────┴─────────┐
│ www.john.com   │     │ www.mary.com   │  │  DNS Records   │   │   DNS Records   │
│ (Custom Domain)│     │(Custom Domain) │  │   for john.com │   │  for mary.com   │
└────────────────┘     └────────────────┘  └────────────────┘   └─────────────────┘

That would involve configuring DNS records to point custom domains to the Vercel-hosted subdomains, and potentially involves Vercel's support for custom domain configurations within their platform.

Based on "Vercel / Adding & Configuring a Custom Domain", you would need first to add a wildcard domain to your Vercel project:

• Go to your project's settings on the Vercel dashboard.
• Navigate to the Domains section.
• Enter *.mysite.com and add it as a wildcard domain. That will allow any subdomain of mysite.com to be directed to your Vercel project.

Then configure DNS settings for each custom domain:

• For an apex domain (like john.com), you need to configure it with an A record pointing to the IP address provided by Vercel.
• For a subdomain (like www.john.com), you should configure it with a CNAME record pointing to the alias Vercel provides for your deployment.

+------------------+-------+-------------------------------------+
| Name             | Type  | Content                             |
+------------------+-------+-------------------------------------+
| *.mysite.com     | CNAME | <vercel-alias-for-your-app>         |
+------------------+-------+-------------------------------------+
| www.john.com     | CNAME | <vercel-alias-for-johns-subdomain>  |
+------------------+-------+-------------------------------------+
| www.mary.com     | CNAME | <vercel-alias-for-marys-subdomain>  |
+------------------+-------+-------------------------------------+
| mysite.com       | NS    | ns1.vercel-dns.com                  |
+------------------+-------+-------------------------------------+
| mysite.com       | NS    | ns2.vercel-dns.com                  |
+------------------+-------+-------------------------------------+

If required, you might have to verify access to the domain, especially if it is already in use by another Vercel account. You would do this by adding a TXT record in your DNS settings.

You might consider using Vercel Nameservers (optional but recommended).
If you want to leverage Vercel's full CDN and performance benefits, you can change your domain's nameservers to Vercel's nameservers. In your domain registrar's panel, replace your current nameservers with those provided by Vercel.

Once you have configured the DNS settings or updated the nameservers, Vercel will verify the domain. It may take some time to propagate. After verification, the domain's status in your Vercel dashboard will update, confirming it is ready for use. See also "How can I manage my Vercel DNS records? / Verifying DNS Records"

With this configuration, each of your users can have a custom domain that points to their respective subdomains on your Next.js app.
For example, www.john.com will display the content from john.mysite.com.

---

404: Not found

The issue you are seeing, where both john.com and www.john.com are leading to a 404 error, while john.mysite.com is correctly displaying John's profile, could be from DNS misconfiguration, propagation delays, or the domain not being correctly added to your Vercel project.

DNS Issues:

• The A record for john.com pointing to 76.76.21.21 should be correct if that is the IP address provided by Vercel for your deployment. However, Vercel generally recommends using an ALIAS or ANAME record for root domains instead of an A record if your DNS provider supports it.
• The CNAME record for www is pointing to john.mysite.com, which might be incorrect if www.john.com is supposed to point to a Vercel deployment. It should point to your Vercel deployment URL or a Vercel-provided alias.
• The wildcard CNAME record is pointing to my-app.vercel.app, which would be correct if you are trying to capture all other subdomains.

For john.com using Cloudflare, you might try the following configuration:

| Type  | Name       | Content                     |
|-------|------------|-----------------------------|
| A     | john.com   | IP provided by Vercel       |
| CNAME | www        | Alias provided by Vercel    |

Vercel Deployment Issues:

• Make sure john.com and www.john.com are added to your Vercel project under the "Domains" section. Vercel needs to know about these domains to route them correctly.
• Vercel's deployment needs to be configured to handle requests coming from john.com and www.john.com. That can involve custom domain setup within your Vercel project settings.

If Vercel provides an ANAME or ALIAS record for root domains, use that instead of an A record for john.com.

• In your Vercel project settings, add john.com and www.john.com as custom domains. That may involve a verification step.
• Sometimes, redeploying your application can help Vercel recognize the newly added custom domains.

Regarding NS Records:

The NS records you added to john.com:

| NS    | mysite.com | ns1.vercel-dns.com |
| NS    | mysite.com | ns2.vercel-dns.com |

That configuration appears incorrect because you are setting NS records for mysite.com within the DNS configuration for john.com. NS records are intended to delegate DNS management for a domain to another server, and should be used at the registrar level, not in the domain's DNS configuration. If john.com is using Cloudflare, it should retain Cloudflare's NS records.

• If you are not moving your entire DNS management to Vercel, remove the NS records you added for mysite.com from the john.com DNS settings.
• Go to your Vercel project settings, check that the custom domains have been added, and follow the verification process.
• Use tools like dig or nslookup, or online services like DNS Checker, to verify that your DNS records are propagating correctly.