Next.jsアプリをVercelにデプロイして公開する方法

Next.jsで作成したWebアプリをVercelのサービスで無料で公開する方法をメモっておきます。

1.GitHubにプロジェクトをアップロード

1.WebアプリのBuild

とりあえずWebアプリができたら

npm run build

でビルドします。(一回でうまくいくことはほぼありません...)

buildできたら.nextフォルダにbuildされるので

npm start

でビルド後の動作を確認します。

2.Gitで色々

1.初期化

git init

でGitリポジトリを初期化します。
実行後、現在のディレクトリでGitが使えるようになります。

2.変更を追加

git add .

ですべての変更を一度にステージングします。

3.変更をコミット

git commit -m "Initial commit"

でステージングエリアにある変更を記録して、新しい「コミット」を作成します。

4.GitHubでリポジトリ作成

GitHubのNew repositoryからリポジトリを作成します。
ここはこれだけで終わり

5.リモート接続してPush

リポジトリを作成して真ん中あたりに表示される

git remote add origin https://github.com/ユーザー名/プロジェクト名.git

で接続して

git push -u origin main

Pushします。

6.終了

これでGitHubにアップロードできたと思います。
リポジトリを確認してみてください。

2.Vercelに接続して公開

1.サイトにアクセス

https://vercel.com/
Vercelの公式サイトにアクセスします。

2.リポジトリを読み込み

「Add New Project (新しいプロジェクト)」からGitHubのリポジトリを選択します。

3.設定

基本そのままでOKです。(Next.jsだから自動検出されます。)

4.デプロイ

「Deploy (デプロイ)」ボタンを押すだけでデプロイが始まります。

3.公開

1〜2分待つと
https://あなたのアプリ名.vercel.app/
で公開されます

4.更新したいとき

git add .

git commit -m "Update"

git push

→これで自動でVercelが再デプロイしてサイトが更新されます。