Vercelへnext.js使用フロントエンドアプリをデプロイしてみたら楽すぎた。

# Vercelとは？

* [Vercel](https://vercel.com/)とは、ZEIT社が提供しているホスティングサービスです。
* 機能として、Global CDNや、Serverless Functionsがあり、Google CloudやGitHubとのIntegration機能があったり様々なものがあります。
* また、セットアップがかなり簡単で、Next.jsを使用すると簡単にSPA, SSR, SSG, ISRのフロントエンドを作成することができます。
* Netlifyと同じように、ビルドとホスティングなどをまとめてやってくれます。
* 無料プランのままでも100回/日までデプロイできる。

# 早速デプロイしてみよう
## 事前準備
GitHubにあらかじめNext.jsで作成したアプリをpushしておきます。
今回は、pages/indexを下記のようにし、hello worldを表示してみたいと思います。

```pages/index.js
export default function Index({current}) {
  return (
    <div>
       Hello World
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
  };
}

```

## Vercelのセットアップ
1.右上のログインボタンをクリックする。
![スクリーンショット 2021-02-22 13.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/12471d2a-028e-aaf7-77e3-11340be395bd.png)

2.今回はGitHubとのintegrationを行いデプロイしようと思うので、GitHubアカウントでのログインを行います。
![スクリーンショット 2021-02-22 13.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/ef4f5150-72ed-ba0f-3acb-34ac266d600a.png)

3.ログインすると、下記のような画面になると思うので、New projectから、プロジェクトを作成する。
![スクリーンショット 2021-02-22 13.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/e10d7b05-a5ab-f7f8-2e3a-2d268b195c82.png)

4.import Git Repositoryから[Add GitHub org or Accountを選択する]
![スクリーンショット 2021-02-22 13.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/ab69c0e7-2c5c-eef8-0aea-a7d6266b5133.png)

5.Github側の設定画面に移動するので、[only select repositories]から、デプロイしたいコードのリポジトリを選択する。 
![スクリーンショット 2021-02-22 13.33.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/3897b893-ad0a-df79-2b73-65492b657e4c.png)

6.5の設定が終わると、下記のようにimportするリポジトリの情報が取れるようになるのでimportしてみる。
![スクリーンショット 2021-02-22 13.35.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/82cf71b3-e2e8-fb83-d95c-2639dcc922cf.png)

7.Scopeの設定が求められますので、今回は、personal accountの下を選択します。
![スクリーンショット 2021-02-22 13.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/c4c7010e-40af-b09e-0796-6a4a914d9e26.png)

8.下記の画面でBuildの設定や、環境変数の設定などができます。今回は特に設定事項がないので、そのままDeployしていこうと思います。
![スクリーンショット 2021-02-22 13.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/86a2cf20-56b6-1a44-8bfd-6565e1a7ca43.png)

9.Deployを押すと、下記のようにBuildが始まります。
![スクリーンショット 2021-02-22 13.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/526354b4-7c93-a346-29e5-fe51487dab36.png)

10.Buildが成功すると下記のように[STATE]がReadyになるので、こうなったらDeployが無事完了です。
右上にある[Vist]を押すとDeployしたアプリに接続できます。
![スクリーンショット 2021-02-22 13.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/9c91f02f-6f46-4296-e7e6-aac21eeb9974.png)

## 動作確認
期待していた、Hello Worldが確認できました！
デプロイ完了です！
![スクリーンショット 2021-02-22 13.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/5ede3578-fdac-5a2c-1f09-3aad401977da.png)

# まとめ
VercelへNext.jsのアプリをDeployしてみたのですが、いかがでしたか。
簡単すぎて鼻汁が出たところで終わりにしたいと思います！
ありがとうございました！🙇‍♂️

# 参考
[NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった](https://dev.classmethod.jp/articles/vercel/)