Mapping different domains to folder paths of the same NextJS app on Vercel

[static cedar]

I have a situation like this:

• My main app is main.example.com

• My customers create folders in the app where their stuff is at main.example.com/customer1, main.example.com/customer2 etc

• My customers now want to map their own custom domain to a folder, e.g. customer1.example.com maps to main.example.com/customer so that when the user visits customer1.example.com the files in in main.example.com/customer1 are served but the URL does not change and the visitor to the site always sees customer1.example.com in the URL bar

What is the best way to achieve this on Vercel? Do I have to have a separate Nginx server running somewhere to configure the reverse proxy, or does Vercel provide some sort of built-in/elegant solution for these situations?

[radiant smelt]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[indigo onyx]

Vercel does support this natively, but that requires you to move the nameservers of the domain to Vercel.

Check https://github.com/vercel/platforms and https://vercel.com/docs/projects/domains/working-with-domains#wildcard-domain

[static cedar]

Hi - thank you. In my case the customer has their own domain, not a need to get a subdomain under my domain. Is that possible?

[indigo onyx]

yes, check the vercel/platforms repo. it supports custom domains. check https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/lib/actions.ts#L72

[static cedar]

Thank you for the helpful information. I think I'm starting to figure this out. My question is here:

My remaining question is regarding this: https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/app/[domain]/[slug]/page.tsx

How do you map a customer's domain (e.g., customer1.example.com) to the [domain] portion of the URL?

[indigo onyx]

Requests to the domain are routed to the [domain] segment by middleware: https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/middleware.ts#L72. Including user custom domains.

Then in pages under [domain], you simply use the (possibly custom) domain to fetch data. Bonus: you can also manually redirect from default subdomains to user custom domains: https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/app/[domain]/layout.tsx#L80

[static cedar]

Ah thank you. It makes sense.