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ではないサイトもあります。その場合任意のページにリダイレクトさせています。

• Twitter 404
• GitHub 404
• Amazon 404
• Netflix 404

nuxt.config.jsの設定

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

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

path: '*'は存在しないページ全てを意味しています。 resolve()に'pages/404.vue'を指定すると、404ページが返されるようになります。
設定したら、デプロイ後に存在しないURLを叩いて確認してみてください。