Vercel とは

Vercel は、Next.js や React などのフロントエンドアプリケーションを簡単にデプロイできるクラウドプラットフォームです。GitHub や GitLab などのリポジトリと連携することで、自動的にビルドやデプロイが行われるため、開発者はコードの更新に集中できます。また、独自ドメインの設定も簡単に行えます。

独自ドメインを設定する前に必要な準備

1. プロジェクトの作成

前のページと重複する内容ですが、Next.js と TypeScript を使用してページを作成します。まず、プロジェクトを作成し、必要なパッケージをインストールしましょう。

npx create-next-app your-project-name --typescript
cd your-project-name
npm install

2. プロジェクトのデプロイ

作成したプロジェクトを Vercel にデプロイします。まず、Vercel CLI をインストールして、Vercel にログインします。

npm install -g vercel
vercel login

ログインが完了したら、プロジェクトのディレクトリで vercel コマンドを実行し、デプロイします。

vercel

独自ドメインを設定する手順

1. ドメインの取得

独自ドメインを設定するには、まずドメインを取得する必要があります。ドメインレジストラ（例：Google Domains, Namecheap など）で好みのドメインを購入してください。

2. Vercel で独自ドメインを追加

Vercel ダッシュボードにアクセスし、デプロイしたプロジェクトを選択します。次に、Settings タブをクリックし、左側のメニューから Domains を選択します。

Add Domain ボタンをクリックし、購入したドメインを入力して追加します。

3. DNS 設定の更新

Vercel が提供するネームサーバー情報をドメインレジストラに設定することで、ドメインを Vercel に向けています。Vercel でドメインを追加した後、表示されるネームサーバー情報をコピーし、ドメインレジストラの DNS 設定に追加します。

通常、以下のようなネームサーバー情報が表示されます。

ns1.vercel-dns.com
ns2.vercel-dns.com

ドメインレジストラの管理画面にアクセスし、ネームサーバー設定を更新します。各ドメインレジストラの設定方法は異なるため、レジストラのドキュメントを参照してください。

4. DNS プロパゲーションの待機

DNS 設定を更新した後、変更がインターネット全体に伝播するまでに時間がかかることがあります。このプロパゲーションの完了を待ちましょう。通常、数時間から 24 時間ほどかかりますが、場合によってはそれ以上の時間がかかることもあります。