[Next.js + firebaseHosting] hosting時にリロードするとNotFoundが出てしまう時の解消法

フロントエンドの知識がなく、用語がうまく検索できずに困っていた。

参考記事

ほぼこれ。

困ってたこと

firebaseHosting上にホストしてるサイトで、Next.jsでのルーティングパスと表示されるサイトが違うことにより、ページをリロードすると404 NotFoundが出てしまっていた。

原因

Next.jsのビルドされて生成したファイルは/XXX.htmlであるのに対し、ホスティングされたサイトでは/XXXが呼ばれており、指定されたパスにファイルがなかったのことが原因だった。

以下の解決方法は(firebase hostingのURL)/XXXでは表示されず(firebase hostingのURL)/XXX.htmlでページが表示される場合に有効である。

解決法

Firebaseのhostingの設定ファイルを書き換える。

firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "trailingSlash": true,
    "rewrites": [
      {
        "source": "/search",
        "destination": "/search.html"
      },
      // [id].htmlは以下のように設定する
      {
        "destination": "/page/[id].html",
        "regex": "^/page/([^/]+?)(?:/)?$"
      },
      ...
     }
    ]
  }
}

上記のように設定したらリロードしてもNotFoundが出なくなった。