Next.jsで静的HTMLエクスポートをするとリンク先が変わる

課題

Next.jsで静的HTMLエクスポートをすると、各ページごとに*.htmlの拡張子が付いたHTMLファイルが作られる。

ところが、このためにhttps://www.example.com/contactではリンクが繋がらず、https://www.example.com/contact.htmlとしなければいけなくなってしまう。

解決

仕方ないので.htmlをリンク先に付与する。

<Link href="contact.html">Contact</Link>

こうすると今度はnpm run devで開発しているときにリンク切れになるのだが――リンク先は以下のように指定するため――

<Link href="contact">Contact</Link>

どちらかしか選べないらしく、基本的にどうしようもなさそうである。

一応他の解決策としては、CloudFrontでLambda@Edgeを使うなどしてリネームするとか、或いはWEBサーバー側でrewriteする、あるいは自分でLINKを拡張する、といったやり方が考えられるが、今のところそこまでするほど困っていないため、しぶしぶながら今回は拡張子を付与する方向で対応した。実用上さほど問題ではないのだが、敗北感が残る結果に。