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

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ(seeds)を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える

「Unit testing security rules with the Firebase Emulator Suite」でセキュリティルールのtestを学ぶ

ローカルでセキュリティルールのtestができるようになったのはありがたい