Vercelを使ってNext.jsのプロジェクトをお手軽にデプロイ

Next.jsのプロジェクトを外部公開にするのに[Vercel](https://vercel.com/)を使うとお手軽です。
Githubのレポジトリと連携させることで自動的にデプロイされるようになります。
個人的かつ非営利な目的でのみの利用なら無料です。

## Next.jsプロジェクトの作成

適当なプロジェクトを作る。

```bash
$ yarn create next-app
```

プロジェクト名はここではvercel-testと付けました。

```bash
✔ What is your project named? … vercel-test
```

## githubとプロジェクトを連携させる。

Vercelはgithubと連携させることでコードの修正後に自動的にデプロイさせることができます。

vercel-testというレポジトリを作成してローカルのプロジェクトをプッシュします。

```bash
$ git remote add origin https://github.com/アカウント名/vercel-test.git
$ git branch -M main
$ git push -u origin main
```

## Vercelにアカウント作成してプロジェクトを作成する

[https://vercel.com/](https://vercel.com/)

VercelのアカウントがなければGithubアカウントと連携してVercelにアカウント登録します。
個人的かつ非営利な目的でのみの利用なら無料です。
登録あるいはログイン後、ダッシュボードからNewProjectをクリック。
![スクリーンショット 2021-05-06 16.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/6520bbe1-bccd-63f6-c7b8-a1fb63ae507c.png)

インポートしたいレポジトリを選びます。

![スクリーンショット 2021-05-06 12.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/28d5a481-aa4f-89c2-8a8b-2159e8321747.png)

インポートしたレポジトリをVercel上で作成できるチームや個人アカウントへ選択してつなげることができる。ここではGithubの個人アカウントを選択。

![スクリーンショット 2021-05-06 12.46.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/f120e035-04ba-465c-4ece-d7080c60a8fd.png)


プロジェクト名やビルドのコマンド名、環境変数の設定などができます。設定しない場合はそのままDeployを押します。

![スクリーンショット 2021-05-06 12.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/ebaae38d-e5f3-7ce1-6b48-8cabe5bf263a.png)


自動的にVercel上でプロジェクトのデプロイが始まります。

![スクリーンショット 2021-05-06 12.53.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/7b459d27-9162-a934-7299-4484aa7ec940.png)


しばらくすると紙吹雪が舞ってデプロイ完了！！
![スクリーンショット 2021-05-06 12.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/a3c57dfa-bd0b-e9f4-f3ef-1e65e1f73e46.png)


Visitを押すとドメインが作成され、プロジェクトの本番サイトを見ることができるようになりました。

![スクリーンショット 2021-05-06 12.58.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/2cdf17be-d128-d92f-6b46-586d2be85606.png)

## Dashboardを見てみる
ダッシュボードでは OverviewでGithubとの連携の確認など全体の概要、DeploymentsでDeploy時の情報、Analyticsでパフォーマンスの測定などが確認できます。
![スクリーンショット 2021-05-06 13.06.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/78cd9fca-4b74-d338-a87b-ba2e3446807f.png)


## コードの変更が本番に反映されるのを確認してみる

試しにpages/index.jsのNext.jsと書かれた見出しをVercel Test Pageと変更してプッシュしてみます。

![スクリーンショット 2021-05-06 13.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/ec8ad536-b330-33ab-94cf-470f77cac033.png)


ダッシュボードのDeploymentsを確認してみると反映されてる様子。

![スクリーンショット 2021-05-06 13.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/34478431-beb3-75f6-87c8-4d14714043c8.png)

Readyとなっているのを確認してVisitを押してみると・・・

![スクリーンショット 2021-05-06 13.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/bbbc5a58-8a67-1c84-40e5-565bee83284b.png)

新しいドメインでコードの修正が反映されたページが作られています。コード変更後プッシュしてからデプロイされるのに30秒もかかりませんでした。

![スクリーンショット 2021-05-06 13.28.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993117/bf9d94b6-cdff-ad60-12c4-93acd7220f8f.png)

# まとめ

- Next.jsのプロジェクトをお手軽にデプロイするのにVercelが便利。
- Github連携でレポジトリにプッシュ後、短い時間でデプロイできる。
- Vercelは個人的かつ非営利な目的でのみの利用なら無料。