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

Firebase Functionsのスケジュール実行はローカルでは動かない

まだサポートされておらず機能リクエストがissueに挙がっている状況

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Firestoreで特定のfieldがnullのドキュメントを取得する

where('field', '==', null)で条件指定できる

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

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