Skip to content

How can I serve multiple projects under a single domain?

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.

Deploying Rewrite Rules

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*"}
  ]
}

An example vercel.json file with rewrite rules.

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.

Note:

If your project is built with a framework that uses 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.
Warning:

The root of the application must be separately matched and forwarded!

Couldn't find the guide you need?