Gatsby製ブログをNetlifyにデプロイしたとき404ページが動作しない問題を修正する

導入

Gatsby 製のブログを Netlify にデプロイしたのですが、404 ページが表示されず、エラーが発生する問題に遭遇しました。
この問題を修正する方法をまとめます。

問題

Gatsby 製のブログをビルドした際に、ローカル環境ではエラーが発生しなかったのですが、Netlify にデプロイするとなぜか Runtime.ImportModuleErrorの画面が表示され、404.js に設定した 404 ページが表示されませんでした。

原因と対処法

gatsby-plugin-netlifyがインストールされていないことが原因です。
なので、gatsby-plugin-netlifyをインストールし、gatsby-config.js に設定を追加することで解決します。

以下に具体的な手順を書きます。

1. gatsby-plugin-netlifyのインストール
2. gatsby-config.js への設定

gatsby-plugin-netlifyのインストール

まず、gatsby-plugin-netlifyをインストールします。
以下のコマンドを実行します。

npm install gatsby-plugin-netlify

これでインストールは完了です。

gatsby-config.js への設定

次に、gatsby-config.js に以下の設定を追加します。

plugins: [
  `gatsby-plugin-netlify`, //この行を追加
]

これで完了です。
これを Netlify にデプロイすると、404 ページが表示されるようになったはずです。

終わりに

今回は Gatsby.js を Netlify にデプロイした際に 404 ページが表示されない問題を修正しました。
この記事が役に立っていれば、シェアをお願いします！