Next.jsでexport(SSG)して、MicroCMSも使って画像最適化もしたい欲張りさんへ

MicroCMSを使ってレンタルサーバーにNext.jsをデプロイしたい、尚且つ画像はビルド時にダウンロードすることによってMicroCMSのデータ転送量を節約＆画像の最適化したかった。
こんな欲張りさんは自分だけかもしれない。

Next Export Optimize Imagesを使って画像を最適化

レンタルサーバーにデプロイするためにoutput: "export"(SSG)をしたかったのでnext/imageの最適化は使えなかった。
Next Export Optimize Imagesを使って最適化した。
https://next-export-optimize-images.vercel.app/

MicroCMSからダウンロードされる画像の最適化

export-images.config.jsのremoteImagesに画像のURLの配列を渡すとビルド時にダウンロードして最適化してくれる。すごい。

export-images.config.js

module.exports = {
  remoteImages: ['https://next-export-optimize-images.vercel.app/og.png'],
  // remoteImages: async () => {
  //   const imageUrls = await getImageUrls() // get image urls from CMS, etc.
  //   return imageUrls
  // }
}

画像が日本語ファイル名の場合の対応

このままだと画像があいうえお.jpgみたいなファイル名の場合、
URLエンコードされて%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A.jpgみたいなファイル名になる。
そうするとNext.jsで画像を表示できなくなる。多分。
この問題をどうしようか何時間も考えた。
export-images.config.jsのfilenameGeneratorを使ってURLデコードすればいけた。

export-images.config.js

filenameGenerator: ({ path, name, width, extension }) => {
	const fileName = `${path.replace(/^\//, "").replace(/\//g, "-")}/${decodeURIComponent(name)}.${width}.${extension}`;
	console.log(fileName);
	return fileName;
},

終わり

こんな事したい人がほかにいるか分かりませんが、参考になれば幸いです。