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.jstrailingSlash を設定する。

module.exports = {
  trailingSlash: true,
}

設定追加後に build & export を再実行すると [id]/index.html の形式でhtmlを生成できるようになる。

out/index.html
out/sample/1/index.html
out/sample/2/index.html

これで末尾スラッシュありでページを表示できるようになったので、ページリロードをしても404が表示されることはなくなった。

参考


Related #next.js