Nuxt.js + Netlifyで404 Not Foundをトップページにリダイレクト

動作環境

$ node -v
v13.2.0
$ npx nuxt -v
@nuxt/cli v2.10.2

Nuxt.js で 404 をトップページにリダイレクト

Nuxt.js 製のサイトで存在しないページへアクセスすると、デフォルトでは画像のような 404 Not Found ページが表示されます。

Nuxt.js のデフォルトの 404 エラーページ

これをトップページ / にリダイレクトするように変更するのは超カンタンです。

pages/*.vue という名前のファイルを作って、 / にリダイレクトする処理を書くだけ。

特殊なファイル名なので、ターミナル上で操作する際は \ で * をエスケープしてやりましょう。

$ vi pages/\*.vue

内容はこれだけ。

<script>
export default {
  asyncData({ redirect }) {
    return redirect('/')
  }
}
</script>

http://localhost:3000/hogehoge のような存在しないページへアクセスして確認しましょう。 http://localhost:3000 にリダイレクトすればOK。

Netlify でも 404 をトップページにリダイレクト

ところが、これを Netlify にデプロイすると、今度は Netlify の 404 ページが表示されてしまいます。

Netlify のデフォルトの 404 エラーページ

これも / へリダイレクトするように設定しましょう。ドキュメントルートに _redirects というプレーンテキストファイルを置いて設定してやるだけです。（参考: Redirects and rewrites | Netlify Docs）

$ vi static/_redirects
/*  /   200
/*  /   404

デプロイして、存在しないページへアクセスして確認しましょう。/ にリダイレクトすればOK。

ハッピー？