目次
１．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に登録している友人向けに創ったアプリです。
これから徐々に改良していく予定です♪