Vercelとは

Vercelは、Vercel Inc.が開発したクラウドプラットフォームです。Vercelを利用することで、開発した静的なサイトやWebアプリケーションを即座に、かつ簡単にデプロイすることができます。

Vercel Inc.はNext.jsの開発元でもあるため、Vercelは特にNext.jsを最適化するような仕組みになっています。しかし、ReactやVue.jsなど他のフレームワークで開発されたアプリケーションもデプロイすることは可能です。

デプロイ手順

まずはGitHubのアカウントが必要になるので、GitHub公式からサインアップします。

GitHub上でリモートリポジトリを作成します。

上記3点くらいやっておけば問題ないと思います。
終わったら作成ボタンをクリックします。

先ほど作成したリモートリポジトリを、ローカルのアプリケーションに追加します。

まず、作成したリモートリポジトリの「Code」ボタンをクリックし、「HTTPS」から表示されたURLをコピーします。

あとはローカルのWebアプリケーションに移動し、以下のコマンドを実行します。

git remote add origin コピーしたURL

その後、git remote -vを実行して、先ほどのリモートリポジトリが追加されていることを確認できたらOKです。

git remote -v

origin	https://github.com/〇〇/my-app.git (fetch)
origin	https://github.com/〇〇/my-app.git (push)

SSH通信の方が良い場合は、リモートリポジトリの「Code」ボタンをクリックし、「SSH」に表示されたURLをコピーします。
そして、以下をコマンドラインで実行すればリモートリポジトリを追加できます。

git remote set-url origin コピーしたURL

リモートリポジトリとの通信をHTTPSで行うと、pullやpush時にユーザー名やパスワードの入力を求められて、面倒な場合があります。
SSHでの通信ならこれらの入力が省略されるので、面倒な場合はSSHがおすすめです。

また、~/.gitconfigに以下の設定を追加すると、どのリポジトリでもユーザー名やパスワードの入力を省略できるそうなので、こちらの方が良いかもしれません。

~/.gitconfig

[url "github.com:"]
	InsteadOf = https://github.com/
	InsteadOf = git@github.com:

コマンドラインから、Webアプリケーションをリモートリポジトリにcommit, pushします。

git commit -m "first commit"
git push origin main

Vercelにログインします。
アカウントを作成していない場合は、Vercel公式からサインアップしてください。

ログインできたら、Vercelのダッシュボードに遷移します。
画面右端にある「Add New」ボタンより「Project」を選択します。

すると、以下のような画面が表示されるので、作成したリモートリポジトリの横にある「import」ボタンをクリックします。

次のような画面が表示されるので、

などの設定を行ったら、一番下の「Deploy」ボタンをクリックして、デプロイを開始します。

何事もなければデプロイが完了します。
ダッシュボードの「Overview」タブから、デプロイしたプロジェクトのURLを確認できます。
（「Domains」の下にある「〇〇.vercel.app」がプロジェクトのURLとなります）

以上となります。
Next.js ＋ Vercelで開発することにより、高速なWebアプリケーションを迅速に公開することができます。

参考にさせていただいたサイトです。
ありがとうございました🙇‍♂️