SVG IconNextTech

#6 独自ドメインでNetlify上にデプロイしたい！

  • Next.js
  • Netlify

はじめに

Next.jsで作成したブログサイトをVercelにデプロイしたのですが，商用利用したいためNetlifyに移行しました．その過程で独自ドメインの設定を行ったのでその方法について解説したいと思います．
Netlifyに独自ドメインを設定する手順については他記事もたくさんあるのですが，古い記事も多いので最新の情報を発信したいと思います．

1. 独自ドメインの入手

今回私はValue-domainでドメインを購入しました．nexttech.tokyoという120円のドメインを購入しました．
https://www.value-domain.com/https://www.value-domain.com/

こちらから登録したい文字列を入力することで購入可能なドメインを確認することができます．購入できたら次はNetlifyの設定です．

2. Netlifyの設定

Netlifyへのドメイン追加とValue-domainでの設定手順

2-1. Netlifyにドメインを追加する

  1. Netlifyの管理画面から，独自ドメインを設定したいサイトを選択
  2. サイドメニューから「Domain management」に移動
  3. 「Production domains」パネルで，Add a domainをクリック
  4. Value-domainで取得したドメイン名を入力し，Verifyをクリック
  5. ドメインの所有者確認画面でYes, add domainをクリック

2-2. DNS設定を確認する

  1. 「Production domains」パネルで，追加したドメインの横に表示されるAwaiting External DNSをクリックします（※Primary domainの方）・
  2. Set up Netlify DNS for yourdomain.comをクリック
  3. DNS設定画面でVerifyをクリック
  4. 画面下部のAdd domainをクリック
  5. レコード追加のオプション設定画面でContinueをクリック
  6. 表示される4件のネームサーバーをコピーしてください（後で使用します）．

3. Value-domainでの設定

3-1. Value-domainについて

Value-domainは，ドメイン取得やレンタルサーバーなどのサービスを提供しています．

3-2. ネームサーバーを変更する

  1. Value-domainの管理画面にログイン
  2. ユーザーコントロールパネル左ナビのドメインをクリック
  3. ドメインの設定操作にあるネームサーバーの設定をクリック
  4. ネームサーバー情報を入力の箇所に，Netlifyでコピーした4件のネームサーバーを入力

以上でValue-domainでの設定は完了です．ただし，設定の反映には24〜72時間程度かかる場合があるので，しばらくお待ちください．(私の場合は15分ほどで完了しました．)

4.反映確認

Netlifyの管理画面から、設定を行ったサイトの設定画面を開きます。
サイドメニューからDomain managementをクリックし、設定したドメインの横にNetlify DNSと表示されていれば反映は成功になります。