Vercel allows you to assign custom domains to your Projects directly from the dashboard, but a production domain can only be assigned to a single project to avoid disambiguity when resolving the domain.
What if you want to break up your application into multiple projects but serve them on different paths of a common base domain? Read on to learn how to achieve this.
To deploy multiple projects under a single domain we will be using both rewrites and basePath configurations to achieve a Multi Zone project on Vercel.
For example, a successful configuration can look like the following:
- A
home
app as the main app that includes the rewrites configuration mapping to theblog
app serving/blog/**
within a next.config.js file. - The
blog
app setsbasePath
to/blog
in a next.config.js file so that generated pages, Next.js assets and public assets are within the/blog
subfolder. - All pages should be unique across zones meaning the
home
app should not have apages/blog/index.js
page.
Please see a complete example project here implementing Multi Zones.
Instead of deploying a project with source code, you can deploy a standalone configuration file named vercel.json
with rewrite rules that map source URL paths to any destination address. Your file may look something like the following:
{ "rewrites": [ {"source": "/admin/", "destination": "https://admin-app.vercel.com/"}, {"source": "/admin/:match*", "destination": "https://admin-app.vercel.com/:match*"}, {"source": "/", "destination": "https://your-app.vercel.com/"}, {"source": "/:match*", "destination": "https://your-app.vercel.com/:match*"} ]}
Rewrites are processed from first to last and the first matching rewrite rule will be used. This means that the /admin/:match*
rule must come before the /:match*
rule.
Once you create a project with the configuration above, you can assign it a production domain. Any requests that match the rewrite rules, will be forwarded to the respective project.
basePath
config, you'll need to configure this to the subpath used in your rewrite. See here for an example setting the basePath
with Next.js.The above will result in a total of three Vercel projects:
- One for the rewrite rules
- One for the root application
- and one for the admin application.