Vercelで別のドメインへリダイレクトする

2022-04-15

目次（タップして移動）

はじめに

こんにちは。VercelからCloudflare Pagesに移行した、こふです。

手順は以下の通りです。

vercel.jsonを Vercel にデプロイしたプロジェクトの一番上のディレクトリに作って書くだけ。

vercel.json
1{
2  "redirects": [
3    { "source": "/", "destination": "https://count-down.cohu.dev", "permanent": true }
4  ]
5}

上記は、実際に契約していたcount-down.siteというドメインから、本ブログのサブドメインへ遷移させた具体例です。

ちなみに、json ファイルは静的なファイルなので値をインポートして使うなどはできません。

他にもリダイレクトの仕方は、以下のように無数にあります。

個人的にフロントエンド開発には React を好んで使っているので、React の手法が多めですが。。。

しかし、一番手軽かつ低いレイヤーで行えるのは Vercel 公式のやり方だと感じました。

リダイレクトを適切に行うことができると、以下のように Google のインデックスにも即座に反映されます。

仮に useEffect を使っていた場合は、コンポーネントをマウントしてからなので、処理する速度の問題で上手に認識されない可能性があります。検証はしていないので予想ですが。。。

自作なので、Notion を使っている方は使ってみてください 😀

Cloudflare Pagesでもさまざまなやり方があるので、紹介したいと思います。

最後までお読みいただきありがとうございました。

いただいたご意見を参考に記事を改善しますので、お気軽に入力ください！