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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった