Next.jsアプリを作ったのに「どうやって公開すればいいかわからない」「カスタムドメインの設定が難しそう」と感じていませんか？この記事では、お名前.comでのドメイン取得からVercelへのデプロイ、SSL証明書の発行確認まで、一連の手順をステップごとに解説します。初めてでも詰まりにくいよう、よくあるトラブルシューティングも合わせて紹介します。

---

Next.js + TypeScript プロジェクトをVercelで公開する全体像

まずは作業の流れを把握しておきましょう。全体は大きく4つのフェーズに分かれます。

1. お名前.comでドメインを取得する
2. GitHubにリポジトリを作成し、Next.jsプロジェクトをプッシュする
3. VercelにGitHubリポジトリをインポートしてデプロイする
4. カスタムドメインをVercelに紐づけ、DNSを設定する

それぞれ独立した作業に見えますが、つながりを意識しながら進めると迷いにくくなります。特にDNS設定は「設定してから反映まで時間がかかる」という特性があるため、早めに着手するのがコツです。

---

お名前.comでドメインを取得してDNSを設定する

ドメイン取得の手順

お名前.comはドメイン登録数が国内最大級で、.comや.jpをはじめ多様なドメインを取得できます。初回は比較的安価なキャンペーン価格が適用されることが多いため、コスト面でも選びやすい選択肢の一つです。

1. お名前.comのサイトにアクセスし、取得したいドメイン名を検索する
2. 希望のドメイン（例：myapp.com）を選択してカートに追加する
3. アカウント登録またはログインを行い、支払い情報を入力して購入を完了する

**注意点として、自動更新設定がデフォルトでオンになっているケースがあります。**必要に応じて設定を確認しておきましょう。

ネームサーバーの確認

ドメインを取得したら、お名前.comの管理画面（Navi）でネームサーバー設定を確認します。後のステップでVercelが提供するDNSレコードを入力するため、お名前.comのネームサーバーをそのまま使う方法が最もシンプルです。

• 管理画面 → 「ドメイン設定」→「ネームサーバーの設定」
• 「お名前.comのネームサーバーを使う」が選択されていることを確認する

もしXサーバーなど他のホスティングサービスのネームサーバーに向けている場合は、DNS設定の入力先がXサーバー管理画面になります。この記事ではお名前.comのDNSをそのまま使うケースを前提に進めます。

DNSレコードの追加（後のステップで設定）

後述のVercel側でカスタムドメインを登録すると、設定すべきDNSレコード（AレコードまたはCNAMEレコード）が表示されます。そのタイミングで再度この管理画面に戻ってくることになるため、ここでは管理画面の場所だけ把握しておけば大丈夫です。

---

GitHubリポジトリを作成してNext.js + TypeScriptをプッシュする

ローカルでプロジェクトを作成する

まだプロジェクトがない場合は以下のコマンドで作成します。

npx create-next-app@latest my-app --typescript
cd my-app

--typescriptオプションを付けることで、TypeScript設定済みのプロジェクトが生成されます。tsconfig.jsonや型定義ファイルも自動で作成されるため、手動で設定する手間が省けます。

GitHubにリポジトリを作成してプッシュする

1. GitHub（github.com）にログインし、「New repository」から新しいリポジトリを作成する
2. リポジトリ名を入力し、「Create repository」をクリックする
3. ローカルプロジェクトをそのリポジトリに紐づけてプッシュする

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/my-app.git
git push -u origin main

GitHubへのプッシュが完了したら、次のステップでVercelと連携します。

---

Vercelにインポートして環境変数を設定する

VercelへのGitHubリポジトリのインポート

VercelはGitHubと連携するだけで自動デプロイが設定されるのが大きな特徴です。mainブランチへのプッシュをトリガーに自動でビルドとデプロイが走ります。

1. vercel.com にアクセスし、GitHubアカウントでサインアップまたはログインする
2. ダッシュボードの「Add New… → Project」からGitHubリポジトリを選択する
3. 先ほどプッシュしたリポジトリを選んで「Import」をクリックする
4. フレームワークが「Next.js」として自動検出されることを確認する
5. 「Deploy」をクリックしてデプロイを開始する

数分でビルドが完了し、https://my-app-xxxx.vercel.appのような形式でURLが発行されます。

環境変数の設定

APIキーやデータベース接続文字列などの機密情報は、コードに直書きせず環境変数として管理します。

1. Vercelのプロジェクト設定画面（Settings → Environment Variables）を開く
2. 「Name」にキー名（例：NEXT_PUBLIC_API_KEY）を入力する
3. 「Value」に対応する値を入力する
4. 適用する環境（Production / Preview / Development）を選択して「Save」する

ローカル開発時には.env.localファイルで同じ変数を定義します。このファイルは.gitignoreに含まれているため、Gitにコミットされません。

環境変数のプレフィックス	用途	ブラウザから参照
NEXT_PUBLIC_ あり	フロントエンドで使う公開情報	○ 可能
NEXT_PUBLIC_ なし	サーバーサイドのみで使う機密情報	✕ 不可

機密情報（APIシークレットなど）は必ずNEXT_PUBLIC_プレフィックスを付けずに定義してください。

---

カスタムドメインをVercelに紐づけてSSLを確認する

VercelにカスタムドメインをAdd

Vercelのデプロイが成功したら、お名前.comで取得したドメインを紐づけます。

1. Vercelのプロジェクト設定 → 「Domains」タブを開く
2. 取得したドメイン（例：myapp.com）を入力して「Add」をクリックする
3. Vercelが推奨するDNSレコードが表示される

表示されるレコードは以下の2パターンのいずれかです。

レコードタイプ	ホスト名	値の例	用途
A レコード	@（ルートドメイン）	76.76.21.21	myapp.com を直接指定
CNAME レコード	www	cname.vercel-dns.com	www.myapp.com を指定

通常は両方設定しておくと、wwwあり・なしどちらでもアクセスできるようになります。

お名前.comでDNSレコードを追加する

1. お名前.comのNavi（管理画面）にログインする
2. 「ドメイン設定」→「DNS設定/転送設定」→「DNSレコード設定を利用する」を選択する
3. 対象ドメインを選んで「次へ」をクリックする
4. Vercelに表示された値を参照しながら、AレコードとCNAMEレコードをそれぞれ追加する
5. 「確認画面に進む」→「設定する」で保存する

**DNS反映には最大24〜48時間かかる場合があります。**実際には数時間以内に反映されるケースが多いですが、反映前にVercelの管理画面で「Invalid Configuration」と表示されても慌てずに待ちましょう。

SSL証明書の自動発行を確認する

VercelはLet’s EncryptによるSSL証明書を自動で発行・更新してくれます。追加の設定や費用は不要です。

DNS反映が完了すると、VercelのDomainsタブでドメインのステータスが「Valid Configuration」に変わります。あわせてブラウザでhttps://myapp.comにアクセスし、鍵アイコン（🔒）が表示されていればSSLが正常に機能しています。

---

よくあるトラブルシューティング

ビルドエラー：型エラーでデプロイが失敗する

TypeScriptの型エラーはローカルでnpm run buildを実行して事前に確認できます。Vercelのビルドはnext buildを実行するため、ローカルでのビルド成功を確認してからプッシュするのが基本です。

npm run build
# エラーがなければデプロイ可能な状態

ドメインがずっと「Invalid Configuration」のまま

• お名前.comで設定したレコードの値に誤りがないか再確認する
• レコードのタイプ（A/CNAME）を間違えていないか確認する
• DNSの反映を待つ（最大48時間）

dig myapp.comコマンドやwhatsmydns.netなどのツールでDNS反映状況を確認できます。

環境変数が本番環境で反映されない

環境変数を追加または変更した後は、**再デプロイが必要です。**Vercelのダッシュボードから「Redeploy」を実行するか、GitHubに空コミットをプッシュすることで最新の環境変数が適用されます。

wwwなしドメインにアクセスできない

AレコードとCNAMEレコードの両方が正しく設定されているか確認してください。また、Vercelの「Domains」設定でリダイレクト設定（www → ルート、またはその逆）が意図通りになっているかも確認します。

---

次のアクション：今日から始めるための3ステップ

ここまでの手順をまとめると、最初に着手すべきことは明確です。

1. お名前.comでドメインを取得する　まだドメインを持っていない場合は、まずここから始めましょう。ドメインは後からいくらでも設定変更できますが、取得自体はすぐに済みます。好きなドメイン名が取られる前に確保しておくのが得策です。

2. ローカルにNext.js + TypeScriptプロジェクトを作成してGitHubにプッシュする　create-next-appで雛形を作り、動作確認してからプッシュします。最初はシンプルな状態で問題ありません。

3. VercelにインポートしてカスタムドメインをAdd、DNS設定を行う　Vercelの無料プランはホビープロジェクトや個人開発の用途には十分なリソースが用意されています。商用利用やチーム開発に移行する場合は有料プランの検討が必要ですが、まず試してみることができます。

DNS反映の待ち時間を除けば、慣れれば1〜2時間で一連の設定が完了します。初めてでも、この記事の手順を上から順番に進めていけば公開まで到達できます。ぜひ自分のNext.jsアプリをカスタムドメインで世界に公開してみてください。

関連記事

• WordPressは古い？Astroを選ぶべき理由【2026年比較】
• 知識ゼロからClaude×Astroで110記事の爆速サイトを作った全手法 — Claude Code × Astro で一人メディアを構築した実績公開