Mapping different domains to folder paths of the same NextJS app on Vercel
Answered
White-crowned Sparrow posted this in #help-forum
White-crowned SparrowOP
I have a situation like this:
- My main app is
- My customers create folders in the app where their stuff is at
- My customers now want to map their own custom domain to a folder, e.g.
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?
- 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 barWhat 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?
Answered by joulev
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
Check https://github.com/vercel/platforms and https://vercel.com/docs/projects/domains/working-with-domains#wildcard-domain
6 Replies
@White-crowned Sparrow 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?
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
Check https://github.com/vercel/platforms and https://vercel.com/docs/projects/domains/working-with-domains#wildcard-domain
Answer
@joulev 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>
White-crowned SparrowOP
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?
@White-crowned Sparrow 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?
yes, check the vercel/platforms repo. it supports custom domains. check https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/lib/actions.ts#L72
@White-crowned Sparrow 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?
White-crowned SparrowOP
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/%5Bdomain%5D/%5Bslug%5D/page.tsx
How do you map a customer's domain (e.g.,
My remaining question is regarding this: https://github.com/vercel/platforms/blob/29e20e790eaf17d4d5051c23a69636dce724c174/app/%5Bdomain%5D/%5Bslug%5D/page.tsx
How do you map a customer's domain (e.g.,
customer1.example.com) to the [domain] portion of the URL?@White-crowned Sparrow 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/%5Bdomain%5D/%5Bslug%5D/page.tsx
How do you map a customer's domain (e.g., `customer1.example.com`) to the `[domain]` portion of the URL?
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/%5Bdomain%5D/layout.tsx#L80
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/%5Bdomain%5D/layout.tsx#L80