📚
Next.js + Firebase Hostingでトップページ以外が404になってしまう問題を解決する
こんにちは。shootaceanです。
Next.jsをFirebase Hostingにデプロイしている構成で、トップページ以外が404になってしまう問題に遭遇したので、その解決方法です。
1行する追記するだけの簡単な修正なので、似たような問題で困っている方も試してみてもいいかなと思います。
解決法: Next.jsのトレイリングスラッシュ機能を有効にする
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
// ...省略
// この行を追記する
trailingSlash: true,
// ...省略
}
module.exports = nextConfig;
補足
最初はFirebaseのリライト設定を疑ったのですが、関係ありませんでした。
上記のトレイリングスラッシュ有効化だけで本現象は解決できます。
firebase.json
{
"hosting": {
// ...省略
// リライト設定は関係なかった
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
// ...省略
}
Discussion