Vercelで無料デプロイする方法【Next.js対応】
目次
Vercelは、Next.jsやReactアプリを無料で簡単にデプロイできるホスティングサービスです。GitHubと連携するだけで自動デプロイが設定され、わずか数分でWebアプリを公開できます。
この記事では、Vercelのアカウント作成からデプロイ、カスタムドメイン設定まで、初心者でも迷わないようにステップバイステップで解説します。
1. Vercelとは？
Vercelは、Next.jsを開発しているVercel社が提供するホスティングサービスです。特にJavaScript/TypeScriptベースのWebアプリに最適化されています。
Vercelの特徴
- ゼロコンフィグ: 設定不要で自動的にビルド・デプロイ
- 自動デプロイ: GitHubにpushするだけで本番反映
- プレビューデプロイ: PRごとにプレビュー環境を自動作成
- グローバルCDN: 世界中のエッジサーバーから配信
- 無料枠が充実: 個人利用なら十分な容量
- HTTPS標準対応: SSL証明書が自動で設定される
対応フレームワーク
Vercelは以下のフレームワークをサポートしています:
- Next.js（最も最適化されている）
- React（Create React App、Vite）
- Vue.js / Nuxt.js
- Svelte / SvelteKit
- 静的サイトジェネレーター（Hugo、Gatsby等）
無料プラン（Hobby）の制限
| 項目 | 無料枠 |
|---|---|
| 帯域幅 | 100GB/月 |
| デプロイ回数 | 100回/日 |
| Serverless Functions | 100GB-時間/月 |
| ビルド時間 | 6,000分/月 |
| カスタムドメイン | 無制限 |
2. アカウント作成とGitHub連携
Step 1: Vercelにアクセス
vercel.com にアクセスし、右上の「Sign Up」をクリックします。
Step 2: GitHubでログイン
「Continue with GitHub」を選択します。GitHubアカウントとの連携を許可してください。
Step 3: プランを選択
プラン選択画面で「Hobby」（無料）を選択します。クレジットカードの登録は不要です。
これで準備完了
アカウント作成からGitHub連携まで約5分で完了します。
3. GitHubからデプロイする
GitHubにあるリポジトリをVercelにデプロイする手順を解説します。
Step 1: 「Add New Project」をクリック
Vercelのダッシュボードで「Add New Project」ボタンをクリックします。
Step 2: リポジトリを選択
連携したGitHubアカウントからデプロイしたいリポジトリを選択し、「Import」をクリックします。
Step 3: 設定を確認してデプロイ
プロジェクト設定画面が表示されます。Next.jsやReactなら自動検出されるので、通常はデフォルト設定のままでOKです。「Deploy」をクリック。
自動検出される設定:
Framework Preset: Next.js
Build Command: next build
Output Directory: .next
Step 4: デプロイ完了
ビルドが完了すると、自動でURLが発行されます（例: your-project.vercel.app）。このURLでアプリにアクセスできます。
初回デプロイ所要時間
アカウント作成からデプロイ完了まで約10分程度です。
4. Vercel CLIでデプロイ
コマンドラインからデプロイしたい場合はVercel CLIを使います。GitHubを経由せずに素早くテストデプロイしたい場合に便利です。
Step 1: Vercel CLIのインストール
npm install -g vercelStep 2: ログイン
vercel loginブラウザが開くのでVercelアカウントでログインします。
Step 3: デプロイ実行
# プロジェクトディレクトリで実行
vercel
# 本番環境にデプロイ
vercel --prod
vercelコマンドはプレビュー環境にデプロイ、vercel --prodは本番環境にデプロイします。
5. 自動デプロイとプレビュー
VercelとGitHubを連携すると、以下の自動デプロイ機能が有効になります。
1. mainブランチへのpush = 本番デプロイ
mainブランチにマージ・pushされると、自動で本番環境に反映されます。
2. プルリクエスト = プレビューデプロイ
PRを作成すると、そのPR用のプレビューURLが自動生成されます。レビュアーが動作確認できます。
3. コメント通知
デプロイ完了時にPRにコメントでプレビューURLが通知されます。
CI/CD不要
GitHub Actionsなどの設定は不要。Vercelが全て自動で行います。
6. カスタムドメイン設定
独自ドメインを使いたい場合の設定方法を解説します。
Step 1: ドメインを追加
Vercelダッシュボードでプロジェクトを選択 → Settings → Domains に移動し、ドメインを入力して「Add」をクリック。
Step 2: DNSレコードを設定
ドメインのDNS管理画面で、Vercelが表示する設定を追加します:
Aレコード: 76.76.21.21
CNAMEレコード（www用）: cname.vercel-dns.com
Step 3: SSL証明書は自動
DNS設定が反映されると、VercelがLet's EncryptでSSL証明書を自動発行します。HTTPSがすぐに使えるようになります。
7. 環境変数の設定
APIキーなどの機密情報は環境変数として設定します。
Vercelダッシュボードから設定
- プロジェクト → Settings → Environment Variables
- 変数名（例:
NEXT_PUBLIC_API_KEY）と値を入力 - 適用環境（Production / Preview / Development）を選択
- 「Save」をクリック
Next.jsでの命名規則
クライアントサイドで使う変数は NEXT_PUBLIC_ プレフィックスをつけます。サーバーサイドのみで使う変数はプレフィックス不要です。
Vercel CLIで設定
# 環境変数を追加
vercel env add MY_API_KEY
# 環境変数を確認
vercel env ls8. よくある質問（FAQ）
Q. Vercelは本当に無料で使える？
はい、個人の非商用利用ならHobbyプラン（無料）で十分です。クレジットカード登録も不要です。
Q. VercelとNetlifyどちらがおすすめ？
Next.jsを使うならVercel一択です。Vercel社がNext.jsを開発しているため最適化されています。
Q. カスタムドメインは無料で使える？
Vercel側でのカスタムドメイン設定は無料です。ドメイン自体は別途取得が必要です。
Q. 自動デプロイはどう設定する？
GitHubリポジトリを連携するだけで自動的に有効になります。追加設定は不要です。
Q. Vercel CLIを使うメリットは？
ローカルからコマンド一発でデプロイできます。GitHubを経由せずにテストしたい場合に便利です。
9. まとめ
Vercelデプロイのポイント
- 1. 無料で使える（個人利用・Hobbyプラン）
- 2. GitHubと連携するだけで自動デプロイ
- 3. PRごとにプレビュー環境が自動作成
- 4. カスタムドメイン・SSL証明書も自動設定
- 5. Next.jsと最も相性が良い
Vercelを使えば、複雑なサーバー設定やCI/CD構築なしに、プロダクションレベルのWebアプリを公開できます。個人開発やポートフォリオサイトの公開に最適です。
まずはGitHubにあるプロジェクトをVercelにデプロイして、その手軽さを体験してみてください。