【Nextjs・SSG】リロードすると404 Not foundになった

はじめに

NextjsでSSGとしてビルドしたものをfirebase hostingにデプロイした際に問題が発生したのでまとめたいと思います。

問題

特定のページをリロードすると404not foundと表示されてしまう(最初にクリックした際には可能)

解決策

以下のように追加した

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: "export",
  trailingSlash: true, // ここを追記
};

module.exports = nextConfig;

原因

https://example.com/aboutというページを作るとします。
next buildでビルドしたときに生成されるのは、about.htmlというhtmlファイルですが、firebase hostingにデプロイするとhttps://example.com/about/index.htmlにabout.htmlが割り当てられてしまいます。

このパスのずれが今回の問題を発生させる原因となりました。

終わりに

検索に引っ掛かったので今回は解決が早く済みました。リダイレクトの仕組み等を理解していないなと思ったのでまた後で確認したいと思っています。