Next.js で静的HTMLをエクスポートするときに気をつけること

静的なマークアップを依頼されたときに、環境を作るのがめんどくさかったからNext.jsで作ることにした。そのときノウハウメモ。

相対パスでCSSとかJSとかを参照するのができない

静的なマークアップを依頼されたときは、相対パスでCSSとかJSを参照するようにして、どのパスに置いても動くようにするような作りを期待されることがあると思うんだけど、Next.jsだと相対パスで指定することはできない。

しかも、ルートのパスに配置するならよかったんだけど、3階層目に置くってことがわかった。こう言うときはNext.jsを使うべきではないのかもしれない。今回は Asset Prefix の機能を使用した。

next.config.js に下記のように書くと、export したときにだけ、参照するURLの先頭にパスを指定することができるようになる。

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  assetPrefix: isProd ? '/hoge/hoge/hoge/' : '',
}

こうすると、 /hoge/hoge/hoge/xxx.css みたいに指定した階層の下のファイルを参照してくれるようになる。

XXX.html のように拡張子 html の URL が前提の場合向いてない

拡張子をhtmlにして出力することはできるが、next dev で参照するときは拡張子なしでアクセスしなければならない。

例えば、/hoge.html というページを出力しようとした場合、next devで動かしてるときは、/hoge にアクセスしないといけない。

そのため、リンクはhoge.html ではるがそのリンクはnext exportしたときにしか機能しない。next devで開発中にめんどくさい。今回は我慢した。

HTMLの中にPHPのタグを入れてって言われても無理

JSXの中にPHPを書くことはできません。と書いてみたけど、こうやれば書けるな。変なdivはできるけど。

<div dangerouslySetInnerHTML={{__html: `<?php echo 'hello'; ?>`}} />

今回は手動で入れたけど、困ったらこう書こう。

next/image がデフォルトでは使えない

next/image で実装して export すると、エラーになります。使うための設定もあるかもしれないけど、調べてません!

onclickで計測タグを指定してって言われた

next.js でonClick属性を書いてもHTML上はonclick属性を設定してないように見えるから設定してって言われた時、こうなってるから大丈夫だよ!って言うのが良いんだけど、うまくコミュニケーション取れない場合は、もうdangerouslySetInnerHTMLで実装しちゃう。

<div dangerouslySetInnerHTML={{__html: `
  <a href="" onclick="gtag(...)">計測</a>
`}} />

まとめ

構成を自分でコントロールできる場合は使うと楽だけど、そうじゃない場合は色々とめんどくさいことにあたることを覚悟しましょう。こんなことも困ったって話があったら教えてもらえるとありがたいです!