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

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

NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめ

静的サイトのデプロイ・ホスティングを無料で使えるNetlifyで、Redirect、Reweiteルールの書き方や処理方法をまとめました。