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エラーページが表示されるようになりました。
以上です。お疲れ様でした。
読んでいただきありがとうございます。