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ページが表示できるようになった。

参考

• Advanced Features: Custom Error Page | Next.js
• Hosting 動作をカスタマイズする  |  Firebase