この記事は最終更新日から1年以上が経過しています。

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

2020-09-26
2021-03-02

今回は、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プロパティに書いていきます。

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

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