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...
このウェブサイトの実装 2022年12月版
以前このウェブサイトの実装 2020年版を書いてからしばらくたって、そろそろまたサイトに手を入れようかなと思っている(思っているだけでやらないかもしれない)ので、現状を書いてみる。コア部分この部分は2020年版と殆ど変わっておらず、markdown で書いたファイルを Dropb...
以前このウェブサイトの実装 2020年版を書いてからしばらくたって、そろそろまたサイトに手を入れようかなと思っている(思っているだけでやらな...