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 |