【Next.js】Next.jsで作ったアプリのVercelへのデプロイ方法【React】

はじめに

VercelとはNext.jsを開発している会社で静的サイトとサーバレス機能のホスティングを提供するクラウドプラットフォーム。
JAMStackなWebサイトやサービスをGUIで簡単にデプロイできる。
Next.jsに至っては、ウチでデプロイしないと本領発揮できませんよー的なノリでVercelがデプロイを推奨している。
料金プランは三つあるが、非営利の個人運用とかポートフォリオ用なら無料のHobbyプランでOK。
従量課金でもないので、基本無料で使える。

デプロイ方法

まず作ったアプリのリポジトリをGitHubに作成する。
赤丸をクリック。
次にここにリポジトリ名を入力する。
なんでもいいが、基本作ってるアプリのディレクトリ名とか。
入力したら他は全部飛ばして一番最後の「Create repository」をクリック

出来たらvscodeのここからコミットメッセージを入れて赤丸をクリック。
コミットメッセージは何でも良いが、最初なら「initial commit」とか。

githubの作ったリポジトリのページに行って、コマンドラインからソースコード上げるならこれしろ。みたいなノリで書いてあるソースコードを打ち込む

~$ git remote add origin https://github.com/ユーザー名/リポジトリ名.git

~$ git push -u origin main

ここまでやってGithubをリロードするとファイルがちゃんと上がってるはず。
それからVercelにログインして、New Projectをクリック

Import Git RepositoryのデプロイしたいアプリのImportをクリック。
個人の場合はPERSONAL ACCOUNTをクリック

この画面で、RESTAPI等を作ってそこからAPIでやりとりしたり環境変数が必要な場合は、Environment Variablesに入力していく。完了したらAddをクリック

環境変数周りをOKならDeployをクリックで正しくデプロイ出来れば紙吹雪が舞います！！

デプロイ後の更新

更新はvscodeでcommitして、ターミナルでgit push -u origin mainでデプロイが走り即時反映される。