next.jsのエクスポート時にトレイリングスラッシュに対応した形式で出力する

方法

next.config.mjsファイルにtrailingSlash: trueを設定すると、index.htmlファイルがエクスポートされるようになります。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  trailingSlash: true,
};
export default nextConfig;

経緯

このサイトでは以下のような階層が出力されていました。

blog.html

/blog

┗記事.html

この状態でhttps://yu-system.site/blog/にアクセスした際にblog.htmlを表示できない問題が発生。

URLの最後の/はトレイリングスラッシュといい、ブラウザにより自動付与されてしまった結果htmlファイルではなくblogディレクトリを開くようになってしまいました。

これに対応するためにはblogディレクトリ直下にindex.htmlとしてページを出力するように上記のtrailingSlash: trueの設定を行います。

確認環境

next.js->14.1.4