Deploying Multi Zones on Vercel with Next.js

Web Development

published on: May 22, 2023

📚 This article is part of a series on

Web Development

Serve Static Files during Development with Parcel
Deploying Multi Zones on Vercel with Next.js

For most of its existence, I hosted catalyst's website, formerly gitlapp, at gitl.app. That was awesome because the domain was short, easy to remember, and identical to the app's name. However, some time ago, GitLab reached out to me and asked me to change the app's name because it was too similar to GitLab's. Cooperating with their request, I renamed the app:

Correspondingly, I also moved catalyst's website to liman.io/catalyst since I already maintain this blog at liman.io. I wanted to keep the design of catalyst's website distinct from the blog's, though, so I needed two separate deployments on the same domain.

Multi Zones

Since this website is set up using Next.js, I looked at one of the framework's advanced features, called multi zones. In a nutshell, multi zones enable merging multiple deployments in a single app. In my case, that is having a project with two directories at the root, called blog and catalyst, each containing a separate Next.js deployment for my blog and the catalyst website, respectively. With this setup, pages need to be unique across all zones to avoid conflicts between identical paths.

Using Vercel for the hosting of the website comes in handy at this point as it supports the deployment of multi zones out of the box. There even is a template project for such cases provided by Vercel.

Deployment

For the deployment, we assume one project to provide the landing page. In my case, that is the blog. According to that assumption, we configure rewrites in the next.config.js of that project to redirect requests to the other zone(s):

next.config.js

async rewrites() {
  return [
    {
      source: "/:path*",
      destination: `/:path*`,
    },
    {
      source: "/catalyst",
      destination: "https://catalyst.liman.io/catalyst",
    },
    {
      source: "/catalyst/:path*",
      destination: "https://catalyst.liman.io/catalyst/:path*",
    },
  ];
}

The first rewrite catches the requests that belong to my blog, while the two other rewrites redirect requests to the website of catalyst. The domain that we specify as the destination for zones is the one that Vercel assigns to the projects.

For that, we need to create a project in Vercel for each zone by importing the respective directory. We must import the project designated as the landing page (i.e., the blog) last. This way, we can specify the domains of the other zones for the rewrites in the next.config.js of the landing page before we import it in Vercel.

At this point, I found that it is crucial to assign a custom domain to the zones other than the landing page. Without a custom domain assigned, Vercel classifies the deployments as a preview rather than production. This classification causes Vercel to automatically assign X-Robots-Tag: noindex to those deployments. As a result, search engines will not index the corresponding zones, which is undesirable. Note that it is necessary to also use the custom domain as the destination in the rewrites.

Finally, we can import the landing page in Vercel to deploy the multi zones. The result is a single app with multiple deployments, all accessible from the same domain.