サーバレスのサムネイル

サーバレス

Netlifyで404ページをデフォルトから独自のものにカスタムする

公開日: 2021.10.1

Netlifyで404ページをデフォルトのものから独自のものにカスタムする方法をまとめました。SPAサイトの場合や、他言語サイトの場合のユースケースも。

編集ノート:SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。

Netlifyの404ステータスの初期挙動

Netlifyでは、サーバーで「404ステータス(Not Found)」が起こった際に、ユーザーが特別な設定をしないでも予め初期挙動が設定されています。

ただ、味気のない英語のページになるので、きちんとしたサイトにしたいのであれば、独自の404ページにカスタムしたいところです。

404ページを独自のものにカスタムする方法

Netlifyで404ページを独自のものにカスタムする方法は非常に簡単で、「公開ルートトップに404.htmlというファイルを置く」だけです。プロジェクトルートではなく、あくまで公開ルートのトップです。

Netlifyでは下記のような挙動で404の処理をしています。

  1. サーバーが404ステータスを返す
  2. 公開ルートのトップから404.htmlを探す
  3. 404.htmlがあったらそのまま表示、なかったらNetlifyの初期404を表示

簡単な仕組みですね。

Netlifyでカスタム404を使うユースケース

Next.js、Vue.jsなどのSPAの場合

Next.js、Vue.jsなどのSPAサイトをホスティングしている場合は、フレームワークによって挙動が違います。

Vue.jsなどのSPAだと404.htmlがあればカスタム404が表示されますが、Nuxt.jsなどのように内部的に404処理をしている場合は、フレームワークないで404の処理を追記しましょう。

SPAサイトをNetlifyでホスティングする場合、

/*   /index.html   200

というリダイレクト設定をしていることがありますが、404の設定は必ずこの記述の後にするようにしましょう。

他言語化をしている場合

サイトを他言語化している場合は、言語ごとの404ページを表示させるのが好ましいでしょう。ルートなら英語の404、/ja/なら日本語の404という形です。

その場合は、予め言語ごとの404.htmlを用意しておいて、パスごとに404の設定をします。

/ja/* /404_ja.html 404
/en/* /404_en.html 404

価格は記載がある場合を除き、すべて税込みです。

関連キーワード

サーバレスの新着記事