はじめに
Next.jsで開発したwebアプリをVercelでデプロイしており、URLはVercelから付与されるxxxx.vercel.appのようなデフォルトのURLだとします。
このxxxx.vercel.appで公開されているURLから、自分で持っている独自ドメインから作ったサブドメインを割り当てる方法を記録します。
なので、moteasobu.jpというドメインがあるとして
indofullness.moteasobu.jpというサブドメインを作りVercelでデプロイする、ということですね。
環境
ホスティング環境はSquarespace
☝️のサポートページを参考にやっていきます
ドメインについて
Vercelでサブドメインを設定
ではやっていきましょう。ホスティングサービスによって変わる部分もあるでしょうが、大体の流れは同じかと。
Vercel側の設定
Settings→Domainsセクションに移動する。
使用したいサブドメインを入力して（例：app.example.com）、「Add Domain」ボタンをクリックする。
これでVercel側の設定は終わり。
ドメイン登録業者側のDNSの設定
Squarespaceを使っているので、いかに沿ってやっていきます。
ドメイン ダッシュボードを開きます。
編集するドメインをクリックします。
[DNS] をクリックします。
[カスタム レコード] まで下にスクロールし、[レコードを追加] をクリックします。
[ホスト] フィールドにサブドメインを入力します。たとえば、完全なサブドメインが「blog.yourdomain.com」の場合、「blog」と入力します。
[データ] フィールドに「ext-sq.squarespace.com」と入力します。
[保存] をクリックします。
カスタム レコードを追加します。
こんな感じで各値の名称は以下のようになってます。
左がSquarespaceの管理画面
右がVercelの管理画面
ホスト = Name
タイプ = CNAME
データ = VALUE
これでカスタム レコードを追加して保存します。
数分から数時間待てば完了です！
Next.js + Vercelでサブドメインを設定してデプロイすることができました！