Next.js + Electronでアプリを開発する際にpublicディレクトリを使う 📁

最近、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。

github.com

先日、 yarn dev ではpublicディレクトリの画像が読み込めるのに、yarn dist で書き出したアプリからは読み込めないという事態に出会したので、調査をしました。

nextjs-ja-translation-docs.vercel.app

原因

div {
  background: url(/img/background.png) center no-repeat;
}

該当箇所は、このような感じで記載していました。
yarn dev を使ってアプリを立ち上げた際は、しっかりと表示されていたので油断していたのですが、yarn distで書き出したアプリでは、file:///img/background.png を見に行ってしまい、リンク切れになっていました。

解決策

実際に見に行かなければならない場所は、

file:///${ プロジェクトのパス }/dist/mac-arm64/${ アプリ名 }/Contents/Resources/app.asar/renderer/out/img/background.png

今回は参照元のHTMLが、

file:///${ プロジェクトのパス }/dist/mac-arm64/${ アプリ名 }/Contents/Resources/app.asar/renderer/out/index.html

だったため、

div {
  background: url(./img/background.png) center no-repeat;
}

と、相対パスにするだけで、yarn dev でも yarn dist でも読み込めるようになりました。

開発終盤だったので焦りましたが、簡単な解決方法で助かりました。
今後は、ちょいちょい書き出したアプリで動作確認しながら進めていこうと思います。