ユーザーは自分のサブドメインを与えることによって特別な感じ.

あなたはどのように自分のサブドメインを作成するユーザーを有効にする疑問がありますか?例えばスラックのワークスペース( space . slack . com )やhashnodeのブログ( name . hashnode . dev )です.
さて、彼らはワイルドカードドメインのサポートを持っているので、Vercelは非常に簡単になります.

ワイルドカードドメインとは

ワイルドカードドメインをサブドメインのキャッチすべてとして考えることができます.
私がfooに行くならば.ドメイン.comと同じページに行きます.ドメイン.COM .
クライアント側では、異なるサブドメインの異なるコンテンツを提供することができます.これは後で意味をなすでしょう.
バーセルで1つを設定することは超簡単です、そして、それはビルトインHTTPSを持ちます.

ワイルドカードドメインの追加

まず、ドメインを使用する必要があります.任意のドメイン登録者からのいずれかを購入することができますnamecheap or porkbun .
この例では、ShopeeTrackerを使用します.COM .それは私がもう使用しない放浪のドメインです.
次に、プロジェクトドメインのタブに移動し、ワイルドカードドメインを入力し、指示に従ってください.例えば、私のドメインはShopeeTrackerです.comと私はname安いからそれを得た.
それでは入力します*.shopeetracker.com 自分のネームサーバを設定します.

一度あなたがすべて設定されている!かなり簡単右?

サブドメインの検出

サーバー側のウィンドウオブジェクトへのアクセスがないので、クライアント側でサブドメインを検出します.
簡単なヘルパー関数を使用すると、URLからサブドメインを抽出できます.

export const getPageData = async () => {
  const { host } = window.location;
  const splitHost = host.split('.');
  const isDev = host.includes('localhost');

  if (splitHost.length === 3 || (isDev && splitHost.length === 2)) {
    // This is your the subdomain
    // Ex. if foo.domain.com then page === 'foo'
    const page = splitHost[0];
    if (page === 'www') {
      return null;
    }

    // You can do your fetching logic here for each subdomain

    return page;
  }

  return null;
};

デモ

実行中の例はhttps://shopeetracker.com , ソースコードはGithub Repo .

結論

カスタムのサブドメインを提供するユーザーを特別に感じることができます.ワイルドカードのドメインを使用すると、すぐに行うことができます.
あなたがあなたのプロジェクトのどれでもこれを試みたならば、私を上へ殴りました.
私もnewsletter .

資源

Github Repo

Live Website

Vercel's Blog Post