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

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる