SSGで構築したサイトをVercel等で公開すると404になる

事象

トップページのhttps://hostは問題なく表示される。

ログインを行ってhttps://host/top等に遷移した初回も問題なく表示される。

ただ、同画面にてリロードを行ったり、検索機能を使うと404エラーになってしまう。

原因

npm run buildを行った後のデプロイ元のoutフォルダの構成を見てみる。

topフォルダが存在せずtop.htmlが作成されている。

開発時のフォルダ構成は以下

見てわかるようにフォルダ構成が異なってしまっている。

初回表示時はルーティングの機能が働いて、top.htmlを表示してくれるが、リロードや直リンクをすると/top/index.htmlを見てしまい404エラーになってしまう。

解決方法

next.config.jsに以下オプションを付与すると、開発時と同じフォルダ構成で出力され問題が解消する。

trailingSlash: true

以下はオプションをつけた状態でビルドしたフォルダ構成。

top/index.htmlが作成されていることがわかる。