Next.jsで生成した静的HTMLページをリロードすると404
next exportで静的な出力を試していたところ、トップページ以外でリロードすると404。
このブログを例にしてみるとnote/[slug].tsxの生成ファイルはnote/[slug].htmlの形式になっています。
out/note/20220402.html out/note/20220403.html
この場合、リンクをnote/20220402に指定していると、リロードでnote/20220402/index.htmlを参照してしまい404になります。
解消するには、indexファイルで出力するようnext.config.jsのtrailingSlashを設定します。
module.exports = { trailingSlash: true, }
設定後にnext buildするとnote/[slug]/index.htmlの形式で生成されます。
out/note/20220402/index.html out/note/20220403/index.html
これでリロードしても表示されます。