Next.js on firebase Hostingの静的サイトで404ページをカスタマイズする

公開日時
更新日時

Next.jsで404ページをカスタマイズしたい場合、 page/404.tsx を記述すればいい。

ただ、next exportで静的ファイルを生成した場合、 out/404.html がNext.jsデフォルトの404ページになる現象が起きた。

そこで、 page/_error.tsx に記述するようにしたところ、 out/404.html にカスタマイズしたhtmlが生成されるようになった。

// pages/_error.tsx
import { NextPage } from "next";

const Error: NextPage = () => (
  <p>Error</p>
)

export default Error

FirebaseHostingの場合、存在しないページにユーザーがアクセスしようとしたときは自動で404.htmlを参照してくれるので、これでカスタマイズした404ページが表示できるようになった。

参考


Related #firebase

Firestoreの複合インデックスを削除する

CLI経由で削除する必要があった

Firebase Web SDK v9

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Firebase Summit 2021