Gatsbyで作成したページを転送する #JavaScript

Gatsby で作成したページをリダイレクトしたい場合、ホスティング先で設定が必要であったが、 Gatsby のプラグインを設定することで対応することも可能です。

プラグインの設定方法などをまとめました。

プラグインの追加

（2021/3/21 時点）今回追加する gatsby-redirect-from は内部で gatsby-plugin-meta-redirect に依存しているため 2 つパッケージの追加が必要となります。

npm i gatsby-redirect-from gatsby-plugin-meta-redirect

npm i gatsby-redirect-from gatsby-plugin-meta-redirect

先程追加した、プラグインの設定を以下ファイルに追記します。

gatsby-config.js

plugins: [
  'gatsby-redirect-from',
  'gatsby-plugin-meta-redirect',
]

query option に allMdx を渡して下さい

gatsby-config.js

plugins: [
  {
    resolve: 'gatsby-redirect-from',
    options: {
      query: 'allMdx'
    }
  },
  'gatsby-plugin-meta-redirect',
]

今回は、 old-sample-markdown.md と言うファイルを old-sample-markdown.md に変更した場合の例を記載します。

Markdown の先頭に redirect_from の記述を追加します。

sample-markdown.md

---
title: Sample Markdown
redirect_from:
  - /old-sample-markdown/
---

設定を追加し、再度 build など実施すると旧 URL にアクセスした際に、新 URL にリダイレクトされるようになりました。

もし、 Netlify を利用しており、このプラグインを利用ぜず転送設定を行いたい場合は以下ドキュメントを参照してください。

今回記載する内容は、同一サイト内のパス変更だけの対応です。異なるドメインへのリダイレクト等は各ホスティングサービスが提供するリダイレクト設定を使用して下さい。