#目次
１．Vercelにデプロイ
２．【おまけ】XServerで取得した独自ドメインに反映する

##１．Vercelにデプロイ
VercelにNext.jsプロジェクトをデプロイする方法は、驚くほど簡単です。

下記、Next.jsの公式ドキュメントの通りに進めればアプリを公開できます。
（getting-startedのところだけ実施でよい。）

独自ドメインを持っていなくてもアプリのURLはVercelが自動で作成してくれます。
私は、「shifty」というプロジェクト名にして、Gitlabのプロジェクトをインポートしたら、

というURLにデプロイされました。

「-eosin」の部分が自動で作成されるわけですね。
他にも、「-snow」とかが付与されたりするそうです。

ちなみに、サインアップには、Gitlabアカウントを使いました。
Gitlabアカウントでサインアップすることのメリットは、
GitlabにソースコードをPUSHしたときに、自動で本番環境にもデプロイされることです。
なので、今回のPJをローカルPCで修正して、GitlabのリポジトリにPUSHしたら、
自動で「https://shifty-eosin.vercel.app/」にも再デプロイされるということです！（便利！！）

##２．【おまけ】XSERVERで取得した独自ドメインに反映する
ですが、私は、XSERVERで取得した独自ドメインにアクセスしたときに、アプリを表示させたかった！
ということで、XSERVERでの必要な設定を記載します。
（サブドメインにアプリを反映するという前提で話を進めます。）

参考サイトはこちらです。

まず、上記公式ドキュメントの「Adding a Domain」の部分の設定を行います。

Step 4: Configuring the Domain
のところで、下記のように設定を行います。

XSERVERのDNSレコード追加を行う画面に遷移します。
（DNSレコード追加への遷移方法：XSERVERにログイン > サーバー管理 > DNSレコード設定 > 対象ドメインの「選択する」をクリック > DNSレコード追加）

下記の表のように値を設定します。

項目	値
ホスト名	[サブドメイン名]
種別	CNAME
内容	cname.vercel-dns.com
優先度

入力したら「確認画面へ進む」 > 「追加する」でレコードを登録します。

これで、設定は完了です。

今回は、こちらに反映させたのですが、無事反映できていることが確認できました！
ちなみに↑このサイトは、仕事のシフトの「早番」か、「遅番」かをGoogle Calendarに登録している友人向けに創ったアプリです。
これから徐々に改良していく予定です♪