課題
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を拡張する、といったやり方が考えられるが、今のところそこまでするほど困っていないため、しぶしぶながら今回は拡張子を付与する方向で対応した。実用上さほど問題ではないのだが、敗北感が残る結果に。