MENU
  1. ホーム
  2. PHP
  3. Next.jsプロジェクトをVercelで独自ドメインで公開する完全ガイド

Next.jsプロジェクトをVercelで独自ドメインで公開する完全ガイド

PHP

Next.jsで作ったWebサイトを世界に公開したい！でも、どうやって独自ドメインで公開すればいいの？そんな疑問を解決するために、Vercelを使った公開手順を分かりやすく解説します。

目次

🚀 この記事で学べること

  • Next.jsプロジェクトをVercelにデプロイする方法
  • 独自ドメインの設定手順
  • DNS設定の具体的な方法
  • SSL証明書の自動取得
  • 継続的デプロイの設定

📋 事前準備

始める前に、以下が準備されていることを確認してください：

Next.jsプロジェクトが完成している
GitHubアカウントを持っている
独自ドメインを取得済み
ドメイン管理サービスのアカウント情報

ステップ1: プロジェクトをGitHubにプッシュ

まず、あなたのNext.jsプロジェクトをGitHubリポジトリにアップロードします。

# プロジェクトフォルダで実行
git init
git add .
git commit -m "Initial commit for Vercel deployment"
git remote add origin https://github.com/username/your-project.git
git push -u origin main

ポイント: package.jsonに"build": "next build"が含まれていることを確認してください。

ステップ2: Vercelでデプロイ

2.1 Vercelアカウントの作成

  1. Vercel公式サイトにアクセス
  2. 「Sign Up」をクリック
  3. GitHubアカウントで登録することを強く推奨

2.2 プロジェクトのインポート

  1. Vercelダッシュボードで「New Project」をクリック
  2. GitHubリポジトリ一覧から対象プロジェクトを選択
  3. 「Import」をクリック

2.3 デプロイ設定

通常、Next.jsプロジェクトはVercelが自動で検出してくれるため、特別な設定は不要です。

  • Framework Preset: Next.js（自動選択）
  • Build Command: npm run build（自動設定）
  • Output Directory: .next（自動設定）

「Deploy」ボタンをクリックして、数分待ちましょう。

2.4 デプロイ完了

デプロイが成功すると、https://your-project-name.vercel.appのような一時的なURLが発行されます。

ステップ3: 独自ドメインの設定

3.1 ドメインの追加

  1. Vercelダッシュボードでプロジェクトを選択
  2. 上部メニューから「Settings」をクリック
  3. 左サイドバーから「Domains」を選択
  4. ドメイン名（例：example.com）を入力
  5. 「Add」をクリック

3.2 DNS設定の変更

Vercelが表示するDNS設定情報に従って、ドメイン管理サービスでDNSレコードを設定します。

パターン1: Aレコードを使用する場合

タイプ: A
名前: @ (ルートドメイン用)
値: 76.76.19.61
TTL: 3600 (1時間)


タイプ: A
名前: www
値: 76.76.19.61
TTL: 3600 (1時間)

パターン2: CNAMEレコードを使用する場合

タイプ: CNAME
名前: www
値: cname.vercel-dns.com
TTL: 3600 (1時間)

重要: お使いのドメイン管理サービス（お名前.com、ムームードメイン、Google Domainsなど）の管理画面で、上記の設定を行ってください。

3.3 DNS反映の確認

DNS設定の反映には24〜48時間かかる場合がありますが、多くの場合は数時間で完了します。

反映状況は以下のコマンドで確認できます：

# Aレコードの確認
nslookup example.com

# CNAMEレコードの確認
nslookup www.example.com

ステップ4: SSL証明書の自動取得

Vercelの素晴らしい点は、SSL証明書が自動で発行されることです。DNSが正しく設定されれば、数分以内にhttps://でアクセスできるようになります。

ステップ5: 継続的デプロイの設定

GitHubとVercelが連携されているため、以下のような自動デプロイが実現されます：

  • mainブランチにプッシュ → 本番環境に自動デプロイ
  • プルリクエスト作成 → プレビュー環境を自動生成
  • コミットごとにビルド状況を通知
# 例：記事を更新してプッシュ
git add .
git commit -m "記事内容を更新"
git push origin main
# 数分後に本番サイトが自動更新される！

🔧 追加設定（オプション）

環境変数の設定

本番環境用の環境変数がある場合：

  1. 「Settings」→「Environment Variables」
  2. 必要な環境変数を追加
  3. 次回デプロイ時に反映

例：

DATABASE_URL=your-production-database-url
API_KEY=your-api-key
NEXTAUTH_SECRET=your-secret-key

カスタムビルド設定

特別なビルド設定が必要な場合：

// vercel.json
{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ]
}

よくあるトラブルと解決方法

問題1: DNSが反映されない

解決方法:

  • DNS設定を再確認
  • TTL値を短く設定（300秒など）
  • 24時間程度待つ

問題2: ビルドエラーが発生

解決方法:

  • npm run buildをローカルで実行してエラーを確認
  • package.jsonの依存関係を確認
  • TypeScriptエラーを修正

問題3: 画像が表示されない

解決方法:

  • next.config.jsで画像最適化の設定を確認
  • 画像パスが正しいか確認

まとめ

Next.jsプロジェクトをVercelで独自ドメインで公開する手順は以下の通りです：

  1. GitHubにプッシュ – プロジェクトをバージョン管理
  2. Vercelでデプロイ – 数クリックで世界に公開
  3. 独自ドメイン設定 – ブランディングを強化
  4. DNS設定 – ドメインとサーバーを紐付け
  5. 継続的デプロイ – 自動更新で開発効率アップ

Vercelの魅力は、複雑な設定なしにプロ仕様のWebサイトを公開できることです。SSL証明書、CDN、自動スケーリングなど、すべてが自動で設定されます。

あなたのNext.jsプロジェクトも、この手順で簡単に世界に向けて公開できます。ぜひ挑戦してみてください！

PHP
プログラミングの独学におすすめ
プログラミング言語の人気オンラインコース
独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。
Udemyの詳しい案内はこちら

関連記事

目次