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...
Next.jsを10へ・markdown 処理をちょっと変えた / 2020年11月23日
今日から旅行の予定だったのだけど、昨日の午後から妻の体調が崩れ、夜には明日から旅行できる感じの体調ではなくなってしまったので、昨日の晩にキャンセルしたのであった。早く良くなるとよいな。することも(看病以外は)特に無くなったので、午前中は仕事をして午後はこれまた安オールドレンズであ...
今日から旅行の予定だったのだけど、昨日の午後から妻の体調が崩れ、夜には明日から旅行できる感じの体調ではなくなってしまったので、昨日の晩にキャ...