Nuxt.js + Netlifyで 404ページを作成する方法

現在Nuxt.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Netlifyで公開しているサイトの404ページ対応を行います。

現状とやりたいこと

特に何も設定しない状況だと、存在しないページにアクセスした場合下記のようにNetlifyのデフォルトのエラー画面が表示されてしまいます。

これを、下記のように独自のエラー画面を表示するようにします。

それでは始めます。

error.vueの作成

404ページや403ページをそれぞれ作成する方法もあるのですが、今回はエラーページ全て同じレイアウトで作成しようと思います。

Layoutsディレクトリ配下にerror.vueを作成します。

error.vueには以下のように記載します。

<template>
 <div class="layout-error">
   <section class="error">
     <h2>{{ error.statusCode }}</h2>
     <div class="article-body">
       <p v-if="error.statusCode === 404">
       アクセスされたページが見つかりませんでした。
       アクセスされたページは存在しないか、すでに削除されています。
       <p v-else>
       エラーが発生しました
       </p>
     </div>
   </section>
 </div>
</template>
<script>
export default {
 props: {
   error: {
     type: Object,
     default: null
   }
 }
}
</script>
<style>
.layout-error {
   max-width: 610px;
   margin: auto;
   padding: 0px 10px;
}
section.error {
   margin: 80px 0;
}
h2 {
   line-height: 1.5;
   font-size: 22px;
   margin-bottom: 16px;
}
</style>

これでファイルの作成は完成です。

かし、これだけだとうまくいきません。存在しないページにアクセスすると、まだ下記のようにNetlifyのデフォルトの404ページが表示されてしまいます。

次にこちらを解決していきます。

next.config,jsの修正

次に、next.config.jsを修正します。

Netlifyは404エラーの時には404.htmlというファイルを読みます。
しかしながら、Nuxtの404ページは200.htmlというファイルになります。
そのため、nuxt.config.jeでフォールバックを有効化し、デフォルトの200.htmlの代わりに404.htmlを表示させるように修正します。

nuxt.configに以下を追記してください。

generate: {
 fallback: true,
 //  省略
}

これで存在しないページにアクセスすると、404エラーページが表示されるようになりました。

以上です。お疲れ様でした。