Nuxt.jsで存在しないURLに404ページを返す方法

今回は、Nuxt.jsで存在しないURLに404ページを返す方法を解説しています。
ユーザーが存在しないURLにアクセスした時に、適切なサイト案内をできるように用意した404ページを返しましょう。

404ページを作る

pages/404.vueを作成して、404ページのルーティングの準備をしましょう。

nuxt generateした時に、404.htmlが出力されるようになります。

404ページのデザインはインターネットで調べてみるといいでしょう。
個性的なでデザインも多いので調べてみると面白いです。基本的にhttps://ドメイン名:404というケースが多いです。

有名な企業の404ページを調べてみました。404.htmlではないサイトもあります。その場合任意のページにリダイレクトさせています。

nuxt.config.jsの設定

存在しないURLにアクセスされた場合の処理をnuxt.config.jsextendroutesプロパティに書いていきます。

export default {
    router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  },
}

path: '*'は存在しないページ全てを意味しています。
resolve()'pages/404.vue'を指定すると、404ページが返されるようになります。

設定したら、デプロイ後に存在しないURLを叩いて確認してみてください。