Vercelで複数のプロジェクトを同一ドメインにデプロイ with Next.js

背景

複数のアプリケーションを同じURL（サブディレクトリ^[1]）上で実現したい。同ドメインに複数Webアプリケーションを動かしたいときに便利です。特に複雑な設定をする必要もなくnext.config.jsに数行追加するだけで実現できます。
簡単に実現できそうな予定が、かなりの時間をドキュメントの閲覧に費やすことになったので、この記事で同じ境遇の方の問題を解決できれば幸いです！

目的

複数のNext.jsアプリケーションを１つのドメインにホスティングしてるかのように見せる。実際はNext.jsのRewrite^[2]を行う。
この記事の設定で下記の通りに、Project1をドメインルートに、Project2をサブディレクトリにデプロイされます。
Project1: https://domain.com
Project2: https://domain.com/project2

前提

Project1, Project2はそれぞれ独立したVercelのプロジェクトとなっております。
はじめに、Vercelのコンソール上からProject1に対して指定のドメインを割り当てておきます。今回の場合はhttps://domain.comとなります。

Project1の設定

既存のnext.config.jsに、rewrites設定を追加します。 Destinationはローカルや環境によって異なるので.envにて管理します。

next.config.js

{
 async rewrites() {
    return [
      {
        source: '/project2/',
        destination: process.env.PROJECT2_URL,
      },
      {
        source: '/project2/:match*',
        destination: process.env.PROJECT2_URL + ':match*',
      },
    ];
  },
}

PROJECT2_URLには、Project2に割り当てられているVercelのUrlを入力します。

.env

PROJECT2_URL="https://project2.vercel.app"

Project2の設定

next.config.js

{
  assetPrefix: '/project2'
}

assetPrefixはNext.jsのstaticファイル等の取得元を正しくするために必要です。設定をしないとProject2のVercelのCDNにアップロードされた画像のURLが異なり描画できません

参考

https://vercel.com/guides/how-can-i-serve-multiple-projects-under-a-single-domain
https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

脚注

1. サブディレクトリ：独自ドメインの後ろに新たな文字列を追加したドメインです。ベースとなる独自ドメインの後ろにスラッシュを入力し、文字列を追加します。
   引用元：https://gmotech.jp/semlabo/seo/blog/subdomain-subdirectory/

2. rewrite：URLプロキシとして機能し、目的地パスをマスクすることで、ユーザーがサイト上の場所を変更していないように見せかけます。対照的に、リダイレクトは新しいページにリルートし、URLの変更を表示します。
   引用元：https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites