A Day in the Life

Next.js で 404.html を静的出力する

いまのサイトホスティングに使っている、Firebase では /404.html があると 404 時に表示される。Firebase hosting の rewrite で /404.html があるように振る舞うマッピングしてもうまく行かず、実体としてのファイルが存在する必要がある。

そして使っている Next.js は /pages/404.tsx 的なファイルが有れば通常は /404.html が出力されるはずだけど、trailingSlash: true を指定している場合、/404/index.html の出力になってしまい、うまく Firebase で 404 ページが表示されない。

最初は next export した後ファイルをコピーして対応していたのだけど、exportPathMap で指定してやれば良いことに気づいた。

module.exports = {
  trailingSlash: true,
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      ...defaultPathMap,
      "/404.html": { page: "/404" },
    }
  },
}

これで、/404.html が生成されるようになった。

あとは配信している /feed をちゃんとしたやり方で作りたいのだけど、Next.js で plain/text や xml など、html 以外を静的生成する方法が今の所解らない..

関連するかもエントリー

このウェブサイトの実装 2020年版
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hosting を使って静的ファイルを配信してる。一部動的な実装に関しては、Cloud Functions for Firebase を使っている...
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hos...
Ruby でエスケープシーケンスを HTML にする
Ruby でエスケープシーケンスを HTML にするansi-sysという gem でできるんだけど、速度がすこぶる遅いので(なんであんなに遅いか解らないぐらい遅い…)ので、普段使ってる Term::ANSIColor に to_html を実装した。https://github...
Ruby でエスケープシーケンスを HTML にするansi-sysという gem でできるんだけど、速度がすこぶる遅いので(なんであんなに...