•
JavaScriptredirectgatsbygatsby-plugin
Gatsbyで作成したページを転送する
Gatsby で作成したページをリダイレクトしたい場合、ホスティング先で設定が必要であったが、 Gatsby のプラグインを設定することで対応することも可能です。
プラグインの設定方法などをまとめました。
プラグインの追加
（2021/3/21 時点）今回追加する gatsby-redirect-from は内部で gatsby-plugin-meta-redirect に依存しているため 2 つパッケージの追加が必要となります。
Yarn を利用している場合
npm i gatsby-redirect-from gatsby-plugin-meta-redirect
Npm を利用している場合
npm i gatsby-redirect-from gatsby-plugin-meta-redirect
プラグインの設定
先程追加した、プラグインの設定を以下ファイルに追記します。
plugins: [
'gatsby-redirect-from',
'gatsby-plugin-meta-redirect',
]
MarkdownRemark ではなく Mdx を利用している場合
query option に allMdx を渡して下さい
plugins: [
{
resolve: 'gatsby-redirect-from',
options: {
query: 'allMdx'
}
},
'gatsby-plugin-meta-redirect',
]
Markdown ファイルに転送設定を追求
今回は、 old-sample-markdown.md と言うファイルを old-sample-markdown.md に変更した場合の例を記載します。
Markdown の先頭に redirect_from の記述を追加します。
---
title: Sample Markdown
redirect_from:
- /old-sample-markdown/
---
設定を追加し、再度 build など実施すると旧 URL にアクセスした際に、新 URL にリダイレクトされるようになりました。
その他補足
もし、 Netlify を利用しており、このプラグインを利用ぜず転送設定を行いたい場合は以下ドキュメントを参照してください。
今回記載する内容は、同一サイト内のパス変更だけの対応です。異なるドメインへのリダイレクト等は各ホスティングサービスが提供するリダイレクト設定を使用して下さい。