Next.js on Firebase Hostingの際にページリロードすると404になる
next exportで静的htmlを生成し、Firebase Hostingで動かした際に、トップページ以外のページに移動してからブラウザをリロードすると404になる現象が起きた。
next exportする際によくハマるのでメモを残しておく。
exportしたディレクトリを見ると、↓のようにsampleディレクトリ以下は [id].html でhtmlが生成されている。
out/index.html
out/sample/1.html
out/sample/2.htmlこの動作を変更するには next.config.js の trailingSlash を設定する。
module.exports = {
trailingSlash: true,
}設定追加後に build & export を再実行すると [id]/index.html の形式でhtmlを生成できるようになる。
out/index.html
out/sample/1/index.html
out/sample/2/index.htmlこれで末尾スラッシュありでページを表示できるようになったので、ページリロードをしても404が表示されることはなくなった。