Netlify でリダイレクトをする方法

こんにちは森田です。
弊社のコーポレートサイトは Netlify を使っています。
今回はNetlify のリダイレクトについて紹介します。

Netlify でリダイレクトする方法

参考：Redirects and rewrites | Netlify Docs

リダイレクトする方法は2つありまして、

1. 「_redirects」ファイルに指定する方法
2. 「netlify.toml」ファイルに指定する

があります。
今回は .htaccess のように書けてわかりやすい _redirects ファイルを使用します。

_redirectsファイルの設置場所

_redirects ファイルは公開ディレクトリに設置します。

これはプロジェクトやフレームワークによって違いますが、 Next.js ですと public ディレクトリ、GatsbyJSなら static ディレクトリなどになるでしょう。

弊社サイトはNext.js なので public ディレクトリに設置します。

リダイレクトの書き方

リダイレクトされるパス、リダイレクトするパス、ステータスコードをスペースを空けてしています。
文頭に # でコメントも使えます。

※ 今回は永続的なリダイレクトをする 301リダイレクトを使用する前提で書いております。

#リダイレクトされるパス リダイレクトするパス ステータスコード
/service /services 301

複数ある場合は改行して続けて指定していきます。

/home / 301
/service /services 301
/blog/my-old-title /blog/my-new-title 301

ワイルドカード

アスタリスク(*)を使うことでディレクトリの以下の指定をまとめてリダイレクトできます。

/news/*  /blog/ 301

splat

ワイルドカードの値をリダイレクトした先に入れたい場合は :splat を使います。

* 以下のURLが :splat に差し込まれます。

/news/*  /blog/:splat

上記ですと例えば、 /news/2022/07/14/10367/ を /blog/2022/07/14/10367/ にリダイレクトできます。

まとめ

シンプルにファイルを置くだけでリダイレクトができて便利でした。
ファイルがあるので git 管理することもできてそこも良いですね。

リダイレクトの他にもプロキシなども使えたので今度記事にできればと思います。