Multiple repos on the same domain in VercelMultiple repos on the same domain in Vercel
Multiple repos on the same domain in Vercel
Dec 15, 2020
How to do micro-frontends on Vercel with a single domain.
In order to host multiple disjoint repos on Vercel, here's what I had to do:
  1. Deploy each app to
  1. Create a parent Vercel project with a vercel.json file to configure routing
  1. Configure Next.js basePath in next.config.js


For step one, you'll need to have an A record setup with Vercel so they can provision your site.
This can be tricky if you're using Cloudflare, as some of the settings you'll need to change are buried in settings menus that are defaulted to "on".
This guide covers it pretty well:
The principle is the same in all DNS setups, even if you're not using Cloudflare.

Parent Vercel project

In order to configure ingress routing inside of Vercel, you'll need to document you infrastructure as code. Vercel uses a vercel.json file. The documentation around this is pretty good, but can be a bit tricky if you're not accustomed to IaC (infra as code).
I used this to setup to:
  • host a marketing landing page a
  • host a blog at
  • (coming soon) the admin tooling at
and each of these is in it's own repo hosted at
My code looks like this:
  "rewrites": [
      "source": "/blog/:match*",
      "destination": "*"
      "source": "/:match*",
      "destination": "*"
I used a rewrite here because I want the content to actually be served under the source path. If I wanted to actually redirect in these cases, I could change rewrites to redirects.
My file structure looks like:
  • parent
    • project-parent (vercel.json lives here)
    • blog
    • home
    • admin
Each of these is deployed via the Vercel CLI, but you could easily connect them to a git repository and have commits to main trigger deployments.

Next.js basePath

Next.js has support for this as of version 9.5. Basically, this is a way of telling your entire Next application that it will be served from That makes loading all of the assets, Next.js Link tags, and other portions of Next function correctly without any additional work.
Warning: this only applies to Next.js features. Hard-coded links or other references on your domain will need to be updated accordingly.
Overall, I'm a fan of this setup. It lets me ship only the code I need to for each section, while leaning on the _app.js and _document.js functionality Next.js provides.

Loading Comments...