# How can I serve multiple projects under a single domain?

**Author:** Lee Robinson

---

Vercel allows you to assign [custom domains](https://vercel.com/docs/custom-domains) to your [Projects](https://vercel.com/docs/platform/projects) directly from the dashboard, but a production domain can only be assigned to a single project. There are several ways to serve multiple projects under different paths of a common base domain, depending on your needs.

## With Microfrontends

If you're splitting a large application across multiple teams or frameworks, [Vercel Microfrontends](https://vercel.com/docs/microfrontends) is the recommended approach. Microfrontends let you compose independently developed and deployed projects into a single, cohesive application under one domain.

To set up microfrontends, define a `microfrontends.json` configuration that maps URL paths to different Vercel projects. Vercel handles routing requests to the correct project in its CDN, so each team can develop, test, and deploy independently without coordinating releases.

Microfrontends support Next.js, SvelteKit, React Router, and other frameworks. To get started, see the [Microfrontends Quickstart](https://vercel.com/docs/microfrontends/quickstart).

This approach is especially useful when you need:

- Independent deploy cycles for different parts of the application
  
- Teams working in different frameworks under one domain
  
- Built-in local development proxy and tooling through the [Vercel Toolbar](https://vercel.com/docs/vercel-toolbar/in-production-and-localhost)
  

## With Next.js Multi Zones

If all your projects use Next.js and you prefer configuring routing through `next.config.js` rewrites rather than `microfrontends.json`, Multi Zones is an alternative.

Use Next.js's [rewrites](https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites) and [basePath](https://nextjs.org/docs/pages/api-reference/next-config-js/basePath) configurations to create a [Multi Zone](https://nextjs.org/docs/pages/building-your-application/deploying/multi-zones) 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 the `blog` app serving `/blog/**` within a [next.config.js](https://nextjs.org/docs/pages/api-reference/next-config-js) file.
  
- The `blog` app sets `basePath` to `/blog` in a [next.config.js](https://nextjs.org/docs/pages/api-reference/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 a `pages/blog/index.js` page.
  

See a complete example project [here](https://github.com/vercel/next.js/tree/canary/examples/with-zones) implementing Multi Zones.

## With a Proxy Project

For cases where you need a lightweight routing layer without framework-specific tooling, a standalone proxy project with `vercel.json` rewrites can route paths to separate Vercel deployments.

Instead of deploying a project with source code, you can deploy a standalone [configuration file](https://vercel.com/docs/project-configuration) named `vercel.json` with [rewrite](https://vercel.com/docs/project-configuration#project-configuration/rewrites) 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.app/"}, {"source": "/admin/:match*", "destination": "https://admin-app.vercel.app/:match*"}, {"source": "/", "destination": "https://your-app.vercel.app/"}, {"source": "/:match*", "destination": "https://your-app.vercel.app/: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](https://vercel.com/docs/concepts/projects/custom-domains#deploying-with-your-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](https://nextjs.org/docs/api-reference/next.config.js/basepath) 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
  
- One for the admin application
  

> **WARNING:** The root of the application must be separately matched and forwarded!

---

[View full KB sitemap](/kb/sitemap.md)
