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. There are several ways to serve multiple projects under different paths of a common base domain, depending on your needs.

If you're splitting a large application across multiple teams or frameworks, Vercel 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.

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

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 and basePath configurations to create 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 the blog app serving /blog/** within a next.config.js file.
• The blog app sets basePath 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 a pages/blog/index.js page.

See a complete example project here implementing Multi Zones.

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 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.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. Any requests that match the rewrite rules will be forwarded to the respective project.

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