この記事は、現在開催中のイベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」の記事です。
next/image は Static HTML Export では使えない
Next.js を使って静的サイトをつくるとき（next export）に、next/imageは使えない。
https://nextjs.org/docs/advanced-features/static-html-export より引用
The next/image component's default loader is not supported when using next export. However, other loader options will work.
静的サイトを生成する際に画像の最適化をしたい場合は、
- next/image で別のローダーを使う
- Gatsby のように Build 時に画像を最適化する
必要がある。
Gatsby のように Build 時に画像を最適化するには、以下のライブラリを使うと実現できる。
しかし、画像の最適化は Gatsby のように自動ではやってくれないため、自分で画像の最適化を指定する必要がある。
また、現状では画像のリサイズと WebP への変換を同時に行うことができない。(正確に言うと、responsive-loaderで jimpを使う場合は使えない)
responsive-loaderでsharpを選択するとできるのだが、現在 sharp のアップデートに対して next-optimized-images の更新がされていないため、responsive-loaderに sharp を使えない。
PullRequest は飛んでいるようなので、対応待ちという状態。
早く PullRequest がマージされるといいですね。