Vercelでリダイレクトの設定をする

VercelでホストしたNext.jsのアプリに外部サイトへのリダイレクトの設定をしたので紹介します。

Contents

設定
ステータスコードを確認してみる
301？308？
参考サイト

設定

プロジェクトルートにvercel.jsonファイルを作成し、下記のように記述します。

{
  "redirects": [
    {
      "source": "/xxx",
      "destination": "https://xxx.com/"
    }
  ]
}

ステータスコード307でリダイレクトさせたい場合はpermanentでfalseに設定すれば良さそうです。(permanentを省略すると308で設定される)

{
  "redirects": [
    {
      "source": "/xxx",
      "destination": "https://xxx.com/",
      "permanent": false
    }
  ]
}

308と307以外のステータスコードを設定したい場合

vercel公式ドキュメントではpermanentの代わりにstatusCodeを設定すれば良さそうです。

{
  "redirects": [
    {
      "source": "/xxx",
      "destination": "https://xxx.com/",
      "statusCode": 303
    }
  ]
}

サイト内でリダイレクトをする場合

外部サイトに飛ばさず、サイト内のあるページからあるページにリダイレクトをしたい場合は下記のように書けば大丈夫です。
1024個くらいまでリダイレクトの設定ができるみたいですん。

{
  "redirects": [
    { "source": "/hoge", "destination": "/hogehoge" },
    { "source": "/fuga", "destination": "/fuga/hoge" },
  ]
}

ステータスコードを確認してみる

実際にステータスコードを確認したかったので下記のツールを使用しました。

HTTPステータスコードチェッカー｜一括検索&転送経路調査もOK

URLを入力して解析ボタンを押すとステータスコードが確認できます。

301？308？

Google Search Consoleではサイト移転に関して301を推奨しているのを見て308じゃなくて301で設定したいと思っていたのですが、Googleのウェブマスター・トレンド・アナリストのJohn Mueller氏によると308は301と同様に処理されるとのことで、308の設定に落ち着きました。

https://twitter.com/JohnMu/status/994633389356429312?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E994633389356429312%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fwww.allegro-inc.com%2Fseo%2F301-redirect-setting

308のステータスコードは新しいもののようで、301の上位互換みたいなものと解釈しました。
308 Permanent Redirect

308 と 301 の違いは、 308 はリダイレクトされたリクエストが行われるときに、メソッドと本文が変更されないことが保証されること。これをもう少し噛み砕くと、301 では、一部の古いクライアントは不正にメソッドを GET に変更するものがあるが、308 では、変更してはならない。

HTTPのリダイレクト時のHTTPステータスコードまとめ – 308 Permanent Redirect