Vercelを使ってみよう
「Vercelとは何か」の説明はここまでとし、実際にVercelでの開発を体験してみましょう。今回は、Vercelが提供しているNext.jsのテンプレートサイトをVercelにデプロイしてみます。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_003.png)
最初に公式サイトから「Start Deploying」をクリックしてください。
今回は、右側の「Clone Template」の「Next.js」をクリックして、Next.jsのテンプレートを選択します。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_004.png)
「Continue with GitHub」をクリックして、GitHubアカウントとVercelを連携します。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_005.png)
GitHubの認証後、Vercelのアカウントが無い場合は自動で作られます。
アカウントが作られた後、「Create Git Repository」の「Create」をクリックします。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_006.png)
Deployが進みます。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_007.png)
デプロイが完了するとこの画面になります。「Go To Dashboard」をクリック。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_008.png)
ダッシュボードでビルド結果の詳細を確認できます。「Visit」をクリック。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_009.png)
以下のようにサンプルページが表示されていることが確認できれば成功です。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_010.png)
GitHubを確認するとプライベートリポジトリのnextjsが自動作成されています。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_011.png)
「pages/index.js」を確認すると先ほど表示されたページのコードが記載されています。
![](http://cz-cdn.shoeisha.jp/static/images/article/15780/15780_012.png)