Netlifyで404ページをデフォルトから独自のものにカスタムする
公開日: 2021.10.1
Netlifyで404ページをデフォルトのものから独自のものにカスタムする方法をまとめました。SPAサイトの場合や、他言語サイトの場合のユースケースも。
Netlifyの404ステータスの初期挙動
Netlifyでは、サーバーで「404ステータス(Not Found)」が起こった際に、ユーザーが特別な設定をしないでも予め初期挙動が設定されています。
ただ、味気のない英語のページになるので、きちんとしたサイトにしたいのであれば、独自の404ページにカスタムしたいところです。
404ページを独自のものにカスタムする方法
Netlifyで404ページを独自のものにカスタムする方法は非常に簡単で、「公開ルートトップに404.htmlというファイルを置く」だけです。プロジェクトルートではなく、あくまで公開ルートのトップです。
Netlifyでは下記のような挙動で404の処理をしています。
- サーバーが404ステータスを返す
- 公開ルートのトップから404.htmlを探す
- 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ルールの書き方や処理方法をまとめました。
価格は記載がある場合を除き、すべて税込みです。
関連キーワード
サーバレスの新着記事
サーバレス複数サイト運営をする際の無料サーバー使いこなし術 2022.9.5
サーバレスHerokuの無料プランが終了へ。移行するならどこがいい? 2022.8.26
サーバレスCloudflare Pages Functionsをローカルでテストする方法 2022.8.12
サーバレスCloudfalre Pagesでリダイレクトを使う方法 2022.8.11
サーバレスCloudflare WorkersとCloudflare Pages Functionの違いと使い分け 2022.8.10
サーバレスCloudinaryの自分のデータを自動でバックアップさせる方法 2022.8.1
サーバレスいまさら聞けないレンタルサーバーとHerokuの違い 2022.5.10
サーバレスCloudflare Pagesでアクセス制限を実装する 2022.4.26