この記事は、ラクスパートナーズ AdventCalendar 2025の20日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
本日はNext.jsで作ったプロジェクトをVercelにデプロイする方法を紹介したいと思います。
Vercelとは
Vercelは、Vercel Inc.が開発したクラウドプラットフォームです。Vercelを利用することで、開発した静的なサイトやWebアプリケーションを即座に、かつ簡単にデプロイすることができます。
Vercel Inc.はNext.jsの開発元でもあるため、Vercelは特にNext.jsを最適化するような仕組みになっています。しかし、ReactやVue.jsなど他のフレームワークで開発されたアプリケーションもデプロイすることは可能です。
デプロイ手順
1. GitHubのアカウントを作成する
まずはGitHubのアカウントが必要になるので、GitHub公式からサインアップします。
2. リポジトリを作成
GitHub上でリモートリポジトリを作成します。
- リポジトリ名を入力
- 公開設定は「Private（公開しない）」を選択
- READMEを作成（これはどちらでも）
上記3点くらいやっておけば問題ないと思います。
終わったら作成ボタンをクリックします。
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に以下の設定を追加すると、どのリポジトリでもユーザー名やパスワードの入力を省略できるそうなので、こちらの方が良いかもしれません。
[url "github.com:"]
InsteadOf = https://github.com/
InsteadOf = git@github.com:
4. commit, pushする
コマンドラインから、Webアプリケーションをリモートリポジトリにcommit, pushします。
git commit -m "first commit"
git push origin main
5. Vercelにログイン
Vercelにログインします。
アカウントを作成していない場合は、Vercel公式からサインアップしてください。
6. リポジトリを選択し、Vercelでデプロイする
ログインできたら、Vercelのダッシュボードに遷移します。
画面右端にある「Add New」ボタンより「Project」を選択します。
すると、以下のような画面が表示されるので、作成したリモートリポジトリの横にある「import」ボタンをクリックします。
次のような画面が表示されるので、
- プロジェクト名
- 使用したフレームワーク
- ビルドの設定
- 環境変数の追加
などの設定を行ったら、一番下の「Deploy」ボタンをクリックして、デプロイを開始します。
7.デプロイ完了
何事もなければデプロイが完了します。
ダッシュボードの「Overview」タブから、デプロイしたプロジェクトのURLを確認できます。
（「Domains」の下にある「〇〇.vercel.app」がプロジェクトのURLとなります）
以上となります。
Next.js ＋ Vercelで開発することにより、高速なWebアプリケーションを迅速に公開することができます。
参考
参考にさせていただいたサイトです。
ありがとうございました🙇♂️